###選択中のタブと内容を区別して表示させたい。
別のページで「別ページから飛んで来たとき、タブを切り替えて表示させたい」、と質問で投げていますが、この方法と別のやり方で、タブの切り替えができました。
しかし、これはこれでまた別の問題が2つ発生しました。
①classが追加されません。
選択中のタブをわかりやすくするために、クラスを追加する記述をしましたが、classがされませんでした。
②選択した内容以外を非表示にしたい。
選択中のタブに合わせた内容のみ表示させたいので、その他は非表示にしたい。
HTMLの記述が悪いのか?jsの記述が悪いのか?
どこが、問題でしょうか?
###実装例
別ページから飛んで来たとき、タブを切り替えて表示されることは、できました。
HTML
1<!-- タブ --> 2<ul class="navi_wrap clearfix"> 3 <li class="tab01"> <a href="#box01">メニュー01</a> </li> 4 <li class="tab02"> <a href="#box02">メニュー02</a> </li> 5 <li class="tab03"> <a href="#box03">メニュー03</a> </li> 6</ul> 7<!-- 内容 --> 8<div class="box_wrap"> 9 <div id="box01" class="box_text"> 10 <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト<br>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト<br>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p></div> 11 <div id="box02" class="box_text"> 12 <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> 13 <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p></div> 14 <div id="box03" class="box_text"> 15 <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> 16 <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> 17 <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> 18 <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p></div> 19</div>
css
1/*タブ*/ 2ul.navi_wrap li{ 3 float: left; 4 background: #ccc; 5 border: 1px solid #000; 6 padding: 5px; 7 text-align: center; 8} 9/*内容*/ 10.box_wrap{ 11 width: 500px; 12 height: 150px; 13 border: 1px solid #000; 14 overflow-x: hidden; 15 overflow-y: auto; 16} 17.box_wrap .box_text{ 18 padding: 5px 10px; 19} 20#box01{background: #9BFF90;} 21#box02{background: #FB9F60;} 22#box03{background: #56F5FD;} 23.box_wrap p{margin-bottom: 10px;}
javascript
1$(document).ready(function() { 2 initPage(); 3 codeSanitizing(); 4 5 // タブ-クリック表示 6 $('.navi_wrap a').on('click', function(e) { 7 e.preventDefault(); 8 $(this).tab('show'); 9 }); 10 11 // ページ外-クリック 12 var hashTabName = document.location.hash; 13 if (hashTabName) { 14 $('.navi_wrap a[href=' + hashTabName + ').tab('show'); 15 }
###問題①classが追加されません。
目的としては、
現在選択しているタグを分かりやすくするために、デザインを変える記述を追加すること。
その方法として、選択したタグにclassを追加させたいのですが、以下の方法では、classが追加されませんでした。
css
1ul.navi_wrap li a.active{ 2 font-weight: bold; 3 color: #fff; 4} 5```選択中のデザインを変える記述をcssに追記 6 7```javascript 8 // タブ-クリック表示 9 $('.navi_wrap a').on('click', function(e) { 10 e.preventDefault(); 11 $(this).tab('show').addClass('active'); 12 }); 13```$(this).tab('show') の後に .addClass('active')を追加。 14これで、classが追加されると思いきや、追加されません! 15 16もちろんこの後、 17ifを用いて、classの追加・削除を記述しなければ、選択中のみの表示を変えることができませんが、classを追加する部分でつまずいていましました。 18 19なぜclassが追加されないのでしょう? 20 21###②選択した内容以外を非表示にしたい。 22問題①の方で、class追加が実装できれば、こちらも簡単にできそうな気がしますが、、、 23問題①でつまずいているため、こちらがまったくできません。 24 25classの追加・削除以外で、コントロールできる方法があれば、アドバイスがほしいです。
回答2件
あなたの回答
tips
プレビュー