jQueryでタブの切り替えを作成しました。
タブを切り替えて、違うページに遷移し、戻るボタンで戻っても、選択したタブが開かれたままにしたいです。
location.hash = 'test' + (index+1);というのを書いて、タブが切り替わった時に#test1, #test2, #test3 とURLに付くようにはしています。
調べていろいろ試したのですが、うまくいかず、どなたか教えていただけないでしょうか?
html
1<div class="all_area"> 2 3 <ul class="tab_area"> 4 <li id="tab1" class="select">Tab1</li> 5 <li id="tab2">Tab2</li> 6 <li id="tab3">Tab3</li> 7 </ul> 8 9 <div class="content_area"> 10 <a href="/link1/">これはTab1の内容です</a> 11 </div> 12 13 <div class="content_area hide"> 14 <a href="/link2/">これはTab2の内容です</a> 15 </div> 16 17 <div class="content_area hide"> 18 <a href="/link3/">これはTab3の内容です</a> 19 </div> 20 21</div>
css
1<style> 2.tab_area{ 3 overflow:hidden; 4 display:table; 5} 6 7.tab_area li{ 8 /*Tabの装飾*/ 9 width:139px; 10 height:49px; 11 text-align:center; 12 border-right: 1px dotted #909090; 13 cursor: pointer; 14 vertical-align:middle; 15 display:table-cell; 16 color:#333333; 17 background-color:#ffffff; 18 } 19 20.all_area { 21 background:#efefef; 22 padding:10px; 23 overflow: hidden; 24 } 25 26.all_area div.content_area{ 27 /*Tabの内容を表示するエリアの装飾*/ 28 background:#ffffff; 29 padding:10px 10px 10px 2px; 30 border-top: 1px dotted #bbbbbb; 31 } 32 33.tab_area li.select{ 34 /*アクティブタブの装飾*/ 35 background-color:#ffffff; 36 background-image:none; 37 border-top:2px solid #e94545; 38 } 39 40.hide{display:none;} 41</style>
javascript
1$(function() { 2 //クリックしたときのファンクションをまとめて指定 3 $('ul.tab_area li').click(function() { 4 //.index()を使いクリックされたタブが何番目かを調べ、 5// indexという変数に代入します。 6 var index = $('ul.tab_area li').index(this); 7 8 //コンテンツを一度すべて非表示にし、 9 $('.content_area').css('display','none'); 10 11 //クリックされたタブと同じ順番のコンテンツを表示します。 12 $('.content_area').eq(index).fadeIn(); 13 14 //タブについているクラスselectを消し、 15 $('.tab_area li').removeClass('select'); 16 17 //クリックされたタブのみにクラスselectをつけます。 18 $(this).addClass('select'); 19 20 location.hash = 'test' + (index+1); 21 }); 22});
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/01/25 03:03