-
ID:gg7.yO さんの質問

jqueryで、他ページから直接タブにアクセスする場合について

jqueryにて、タブの実装を試みています。
現在のソースは下記の通りなのですが…、

-------------

$(function() {
$(’#tabContents > div’).hide();
$(’#tabNavi a’).click(function () {
$(’#tabContents > div’).hide().filter(this.hash).fadeIn();
$(’#tabNavi a’).removeClass(’active’);
$(this).addClass(’active’);
return false;
}).filter(’:eq(0)’).click();

// 別ページから開く
if (location.hash) {
$(’#tabContents > div’).hide().filter(location.hash).fadeIn();
//更に、location.hashが貼られているa要素にactiveクラスを追加したい
}
});

<ul id="tabNavi">
<li><a href="#tab1">リンク1</li>
<li><a href="#tab2">リンク2</li>
<li><a href="#tab3">リンク3</li>
</ul>

<div id="tabContents">
<div id="tab1">コンテンツ1</div>
<div id="tab2">コンテンツ2</div>
<div id="tab3">コンテンツ3</div>
</div>

-------------

コメントアウトで記載した通り、他ページから
タブにアクセスする際に、location.hashをhrefに持つa要素に
activeクラスを追加したいです。

例えば、「~.html#tab1」で一つ目のタブにアクセスした場合、
<a href="#tab1">を<a class="active" href="#tab1">に書き換えたいのです。

この場合、どのような方法が考えられますでしょうか?

また、他ページから各タブにアクセスする方法として
もっとスマートなやり方等あれば、ご教授頂けると大変助かります。。

未熟者で恐縮なのですが、よろしくお願いいたします。

みんなの回答 1 件

ID:0j2Xwk さんの回答

ハッシュ使うんだったらjQueryいらないよ。
CSSだけできる。
:targetで検索してみて。
そっちの方が簡単だと思うよ。

ID:gg7.yO

cssでも実現できる方法があるのですね。。!
jQueryで制御するしかないと思っていました。
ありがとうございます、調べてみます!

最終更新日:2015-04-09 (3,943 views)

関連するトピックス

ページ上部に戻る