※以前にも同じ質問を投稿しましたが、追記が多くなりすぎて見にくくなったため再投稿いたします。
JQueryでタブの操作をコントロールするコードを書いております。
デフォルトで開くタブをtab2.html上でselectをつけることで固定したいのですが、なぜかselectをつけていないタブがデフォルトで開かれてしまいます。
問題としてはtab2.htmlを直接、開いたときにtab3がひらかれてしまうということです。
どなたかわかる方いらっしゃらないでしょうか？
なおこのコードはタブだけでなく、違うページからリンクしてきたときに特定のタブを指定できるようにしており、かつページ内ジャンプの機能もはいっております。
文章でうまく説明できない部分があるので、Githubのリンクを貼りました。
https://github.com/nannantown/new-tab
cssのhtmlも入っておりますので、どなたかみていただけないでしょうか？
<script type="text/javascript">
$(function() {
//クリックしたときのファンクションをまとめて指定
$('ul.tab_area li').click(function() {
//.index()を使いクリックされたタブが何番目かを調べ、
// indexという変数に代入します。
var index = $('ul.tab_area li').index(this);
//コンテンツを一度すべて非表示にし、
$('.content_area').css('display','none');
//クリックされたタブと同じ順番のコンテンツを表示します。
$('.content_area').eq(index).fadeIn();
//タブについているクラスselectを消し、
$('.tab_area li').removeClass('select');
//クリックされたタブのみにクラスselectをつけます。
$(this).addClass('select')
});
});
//ダイレクトリンク
$(function() {
var urlParam = location.search.substring(1);
if(urlParam) {
var param = urlParam.split('&');
var paramArray = [];
for (i = 0; i < param.length; i++) {
var paramItem = param[i].split('=');
paramArray[paramItem[0]] = paramItem[1];
}
if(paramArray.hash.length){
var tabname = paramArray.hash;
}else{
var tabname = "tab1";
}
}
//コンテンツを一度すべて非表示にし、
$('.content_area').css('display','none');
//一度タブについているクラスselectを消し、
$('.tab_area li').removeClass('select');
var tabno = $('ul.tab_area li#' + tabname).index();
//クリックされたタブと同じ順番のコンテンツを表示します。
$('.content_area').eq(tabno).fadeIn();
//クリックされたタブのみにクラスselectをつけます。
$('ul.tab_area li').eq(tabno).addClass('select');
if(paramArray.anc.length){
var ancname = paramArray.anc,
ancOffset = $('#' + ancname).offset().top;
if(ancOffset){
$('html,body').animate({scrollTop: ancOffset}, 400);
}
}
});
</script>
↓飛ぶ前 index.html
<ul>
<li><a href="tab2.html?hash=tab1">shampooこのリンクはTab1に飛びます。</a></li>
<li><a href="tab2.html?hash=tab2">aminoこのリンクはTab2に飛びます。</a></li>
<li><a href="tab2.html?hash=tab3">ururiこのリンクはTab3に飛びます。</a></li>
<li><a href="tab2.html?hash=tab2&anc=first">sarariこのリンクはTab2のfirstリンクに飛びます。</a></li><!-- tab2firstに飛びたい-->
<li><a href="tab2.html?hash=tab2&anc=second">kururiこのリンクはTab2のsecondリンクに飛びます。</a></li><!-- tab2secondに飛びたい-->
</ul>
↓飛び先tab2.html
<body>
<div class="all_area">
<ul class="tab_area">
<li id="tab1" class="select">Tab1</li>
<li id="tab2">Tab2</li>
<li id="tab3">Tab3</li>
</ul>
<!-- tab1 start -->
<div class="content_area">
<ul class="list_area">
<li>これはTab1の内容です</li>
<li>これはTab1の内容です</li>
<li>これはTab1の内容です</li>
<li>これはTab1の内容です</li>
</ul>
<!-- /tab1 end -->
</div>
<!-- tab2 start -->
<div class="content_area hide">
<p>これはTab2の内容です。これはTab2の内容です。これはTab2の内容です。これはTab2の内容です。これはTab2の内容です。これはTab2の内容です。</p>
<!-- /tab2 end -->
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<a id="first">ここに飛びたい</a>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<a id="second">ここに飛びたいpart2</a>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</div>
<!-- tab3 start -->
<div class="content_area hide">
<p>これはTab3の内容です<br>
</p>
<!-- /tab3 end -->
</div>
<!-- /tab area end -->
</div>
</body>
Q&A
