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 件
ハッシュ使うんだったらjQueryいらないよ。
CSSだけできる。
:targetで検索してみて。
そっちの方が簡単だと思うよ。
関連するトピックス