Q&A
現状display:none;になっているのは<h3 id="section1" class="sample1">セクション1</h3>の部分だけかと思いますが、実際にはどうなるのが理想なのでしょうか？「リンク先の内容」とはどの箇所を指しますか？？もし可能であれば図等ご提示いただけると助かりますm(_ _)m
以下のコードは、同じ文書内の特定部分へのリンクが可能にすることが可能ですが、このコードを実行すると、リンク先の内容も表示されます。
リンク先の内容を表示したくないのですが、どうすれば内容が表示されないようにできますか？
cssでセクション1のところをdisplay:none;で指定しましたが、消えませんでした。
※visibility:hiddenは使いたくありません。なぜなら、要素がしっかりと残っていて見えなくなっているだけですから。
html
1 2<html> 3<style> 4.sample1{ 5display:none; 6} 7</style> 8<body> 9<h1>TAG index</h1> 10 11<h2>サンプル</h2> 12 13<h3 id="menu">メニュー</h3> 14<ul> 15<li><a href="#section1">セクション1</a></li> 16<li><a href="#section2">セクション2</a></li> 17<li><a href="#section3">セクション3</a></li> 18</ul> 19 20<h3 id="section1" class="sample1">セクション1</h3> 21<p>セクション1の段落。 ...</p> 22 23<h3 id="section2">セクション2</h3> 24<p>セクション2の段落。 ...</p> 25 26<h3 id="section3">セクション3</h3> 27<p>セクション3の段落。 ...</p> 28 29<hr> 30 31<p><a href="#menu">メニューに戻る</a></p> 32 33
回答2件
0
ベストアンサー
こちらに記載しますね。
下記をまんまコピペすれば動くかなぁと。
もしも動きに問題なさそうであれば明日辺り、簡単にご説明できればと思いますm(_ _)m
あえて長々書いてしまっていますが、超簡単な内容なのでご確認くださいませ。
HTML
1<html> 2<head> 3<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 4</head> 5<body> 6<script> 7 $(function(){ 8 $(".section_trigger_1").on("click",function(){ 9 $(".section_box").hide(); 10 $(".section_box_1").show(); 11 }) 12 $(".section_trigger_2").on("click",function(){ 13 $(".section_box").hide(); 14 $(".section_box_2").show(); 15 }) 16 $(".section_trigger_3").on("click",function(){ 17 $(".section_box").hide(); 18 $(".section_box_3").show(); 19 }) 20 $(".section_trigger_all").on("click",function(){ 21 $(".section_box").show(); 22 }) 23 $(".section_trigger_hide").on("click",function(){ 24 $(".section_box").hide(); 25 }) 26 }) 27</script> 28<style> 29.section_box{ 30 display:none; 31} 32</style> 33<h3 id="menu">メニュー</h3> 34<ul> 35 <li class="section_trigger_1">セクション1</li> 36 <li class="section_trigger_2">セクション2</li> 37 <li class="section_trigger_3">セクション3</li> 38 <li class="section_trigger_all">全部表示させるよ</li> 39 <li class="section_trigger_hide">全部隠すよ</li> 40</ul> 41<div class="section_box_1 section_box"> 42 <h3>セクション1</h3> 43 <p>セクション1の段落。 ...</p> 44</div> 45<div class="section_box_2 section_box"> 46 <h3>セクション2</h3> 47 <p>セクション2の段落。 ...</p> 48</div> 49<div class="section_box_3 section_box"> 50 <h3>セクション3</h3> 51 <p>セクション3の段落。 ...</p> 52</div> 53</body> 54</html>
投稿2016/09/20 13:34
総合スコア328
0
コメント欄にて失礼いたします。
まんまコピペしたところ、下のスクショのようになりましたがご希望の見え方とはどう違うのでしょうか？
投稿2016/09/20 07:31
総合スコア328
セクション1をクリックしたら、セクション2の段落を表示させたいんです。
説明不足ですみません。
ごめんなさい、理解力が浅いのかどういう動きになればいいのかがいまいちピンとこず。。
① display:noneになるセクションは動的に変化するということでしょうか？
② セクション1がdisplay:noneになる場合、
セクション1をクリック→セクション2のブロックへ
セクション2をクリック→？？
セクション3をクリック→？？
これらの動きを再現しているサイトや参考にしているサイトがあれば教えていただけるとイメージしやすいです。m(_ _)m
すみません、説明不足で。
詳しく説明すると、
①セクション1、セクション2、セクション3の内容を非表示にして、メニューをクリックした時に内容を表示させる
②display:noneにしたのはセクション1、セクション2、セクション3の内容を非表示にして、クリックした時に表示したいからです。
つまり、元々のコードだと最初からクリック先の内容が表示されているのでクリック時のみにリンク先の内容を表示させたいです。
あなたの回答
tips
プレビュー
