よくあるサイトで、クリックボタンを押すとその詳細が現れるものがありますが、どうやったらできますか?
例えば、
html
1<a href="〇〇html">Aくん</a>
を押す方法はありますが、別ファイルの〇〇htmlを使うのではなく、同じファイル内にあるものを指定して表示する方法はどういった方法ですか?
同ファイルに二つのhtmlがあります。
table1のa href=をクリックしてtable2を表示するには何を使うといいですか?
※table2にidを指定するといいんですかね?適当に答えてしまいましたが・・・笑
table1
html
1<table><tr> 2<td><a href="">Aくん</a></td> 3</tr> 4
table2
html
1<table> 2<tr> 3<td>身長</td> 4</tr> 5<tr> 6<td>体重</td> 7</tr> 8<tr> 9<td>年齢</td> 10</tr> 11</table>
気になる質問をクリップする
クリップした質問は、後からいつでもMYページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
回答4件
0
個人ごとにテーブルを作成してidで指定してもいいですが
冗長な構成になりやや効率がわるいかもしれませんね。
今回の用途であれば各データにclassを指定してやれば参照できます。
参照したデータについては擬似的なモーダルウィンドウを作るとよいでしょう
サンプル
手抜きモーダルサンプルです
ちゃんと実装する場合はなにかライブラリを使ったほうがよいでしょう
モーダルのライブラリはいろいろあるので幾つか試した上で、
使い勝手がいいものを選んでください
HTML
1<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 2<script> 3$(function(){ 4 $('a.view').on('click',function(e){ 5 e.preventDefault(); 6 var selector=$('.'+$(this).attr('id')); 7 var txt=""; 8 txt+="氏名:"+selector.filter(".name").html()+"<br>"; 9 txt+="身長:"+selector.filter(".height").html()+"<br>"; 10 txt+="体重:"+selector.filter(".weight").html()+"<br>"; 11 txt+="年齢:"+selector.filter(".age").html()+"<br>"; 12 txt+="<br>[クリックしたら閉じます]"; 13 $('#mymodal').remove(); 14 $('<div>'+txt+'</div>').attr('id','mymodal').insertAfter('#wrap').hide(); 15 var w1=$('#mymodal').width(); 16 if(w1<200) w1=200; 17 var h1=$('#mymodal').height(); 18 if(h1<200) h1=200; 19 $('#wrap').css({height:"100%",width:"100%",opacity:0.3}); 20 var w0=$('#wrap').width(); 21 var h0=$('#wrap').height(); 22 $('#mymodal').css({"border":"1px solid #000000","background-Color":"aqua","position":"absolute","top":(h0-h1)/2,"left":(w0-w1)/2,"width":w1,"height":h1}) 23 .show().on('click',function(){$('#wrap').css({opacity:1});$(this).remove()}); 24 }); 25}); 26</script> 27 28<div id="wrap"> 29<table> 30<tr><td><a href="#" class="view" id="a">Aくん</a></td></tr> 31<tr><td><a href="#" class="view" id="b">Bくん</a></td></tr> 32<tr><td><a href="#" class="view" id="c">Cくん</a></td></tr> 33</table> 34 35 36<table> 37<tr> 38<td>氏名</td> 39<td class="a name">A田 A男</td> 40</tr> 41<tr> 42<td>身長</td> 43<td class="a height">150cm</td> 44</tr> 45<tr> 46<td>体重</td> 47<td class="a weight">50kg</td> 48</tr> 49<tr> 50<td>年齢</td> 51<td class="a age">18</td> 52</tr> 53<tr> 54<td>氏名</td> 55<td class="b name">B山 B造</td> 56</tr> 57<tr> 58<td>身長</td> 59<td class="b height">180cm</td> 60</tr> 61<tr> 62<td>体重</td> 63<td class="b weight">100kg</td> 64</tr> 65<tr> 66<td>年齢</td> 67<td class="b age">20</td> 68</tr> 69<tr> 70<td>氏名</td> 71<td class="c name">C岡 C助</td> 72</tr> 73<tr> 74<td>身長</td> 75<td class="c height">170cm</td> 76</tr> 77<tr> 78<td>体重</td> 79<td class="c weight">55kg</td> 80</tr> 81<tr> 82<td>年齢</td> 83<td class="c age">25</td> 84</tr> 85</table> 86</div>
投稿2016/10/20 07:20
編集2016/10/21 14:19総合スコア114572
0
「よくあるサイトで、クリックボタンを押すとその詳細が現れるもの」というのが曖昧なので「このサイトで使われているこういう状態を実装したい」と具体例を出した方がいいと思いますよ。
同じページ内でリンクしたい
http://www.tagindex.com/html_tag/link/a_id.html
onclickで表示したい
http://ryus.co.jp/blog/htmltitleclickshow/
モーダルウィンドウを表示したい
http://kwski.net/jquery/787/
投稿2016/10/21 01:07
総合スコア3235
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/10/21 14:32
0
https://syncer.jp/jquery-modal-window
これを使えば実現できそうですがどうでしょうか?
投稿2016/10/20 07:24
編集2016/10/21 03:01退会済みユーザー
総合スコア0
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
0
ベストアンサー
cssで初期状態はdisplay:none;にしておき、
Aくんのaタグのonclickでshowにしてあげるといいですよ。
投稿2016/10/20 07:23
総合スコア686
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/10/20 11:41
2016/10/20 12:15
2016/10/20 15:38
2016/10/21 01:37
2016/10/21 01:49
2016/10/21 09:01
2016/10/21 10:01
2016/10/21 13:08
あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/10/20 07:22
2016/10/20 11:42
退会済みユーザー
2016/10/21 02:58
2016/10/21 03:13