別ページから、特定のタブが開いた状態でリンクさせたいです
解決したいこと
tab.htmlというページに3つのタブを設置しているとして、
A.htmlというページから、
tab-1
tab-2
tab-3
という3つのリンクを設けてそれぞれのリンク先を、tab.html内のそれぞれが表示されている状態にしたく、以下のようなソースを用意しました。
該当するソースコード
<div class="information-requirements c-tabs">
<div class="information-requirements__list c-tabs-list">
<div class="c-tabs__link current" data-id="#information-requirements-1"><span>tab-1</span></div>
<div class="c-tabs__link" data-id="#information-requirements-2"><span>tab-2</span></div>
<div class="c-tabs__link" data-id="#information-requirements-3"><span>tab-3</span></div>
</div>
<div id="information-requirements-1" class="c-tabs-content current">
tab-1
</div>
<div id="information-requirements-2" class="c-tabs-content">
tab-2
</div>
<div id="information-requirements-3" class="c-tabs-content">
tab-3
</div>
</div>
$(function () {
//タブの実装
$(".information-requirements .c-tabs__link").click(function () {
var index = $(".information-requirements .c-tabs__link").index(this);
$(".information-requirements .c-tabs__link, .information-requirements .c-tabs-content").removeClass("current");
$(this).addClass("current");
$(".information-requirements .c-tabs-content").eq(index).addClass("current");
});
});
$(function () {
//タブへダイレクトリンクの実装
//リンクからハッシュを取得
var hash = location.hash;
hash = (hash.match(/^#information-requirements-\d+$/) || [])[0];
//リンクにハッシュが入っていればtabnameに格納
if ($(hash).length) {
var tabname = hash.slice(1);
} else {
var tabname = "information-requirements-1";
}
//コンテンツ非表示・タブを非アクティブ
$(".information-requirements .c-tabs__link").removeClass("current");
$(".information-requirements .c-tabs-content").removeClass("current");
//何番目のタブかを格納
var tabno = $(".information-requirements .c-tabs-content#" + tabname).index();
//コンテンツ表示
$(".information-requirements .c-tabs-content").eq(tabno).addClass("current");
//タブのアクティブ化
$(".information-requirements .c-tabs__link").eq(tabno).addClass("current");
});
上記の様に設定し、
tab.htmlにアクセスすると、デフォルトでtab-3が開いた状態になり、
tab.html#tab-1
tab.html#tab-2
tab.html#tab-3
という風に外部にリンクを置いてもそれぞれのタブを開いた状態になりません。
厚かましいお願いかと存じますがどなたかご助力いただけませんでしょうか。
よろしくお願いいたします。
0
