別ページのリンクで、該当タブの中にあるハッシュタグで指定された箇所へ飛ぶようにしたいです。
(例:tab1.htmlの『タブ1のlink1へ』をクリックすると、tab2.htmlのタブ1の#link1に飛ぶ)
JSの部分に、ハッシュの指定を入れれば良いのかなと思ったのですが、いまいちわからず…。
どなたかお教えいただけると助かります。
■tab1.html
/*タブへダイレクトリンクしつつ、更にその中のアンカーポイントへ*/ <a href="tab2.html?no=tab1#link1">タブ1のlink1へ</a> <a href="tab2.html?no=tab2#link2">タブ2のlink2へ</a>
■tab2.html
/* タブ */ <ul class="tab_area"> <li id="tab1" class="select">タブ1</li> <li id="tab2">タブ2</li> </ul> <div class="content_area"> タブ1の内容 <div class="link1"> link1の内容 </div> </div> <div class="content_area hide"> タブ2の内容 <div class="link2"> link2の内容 </div> </div>
■CSS
.hide{ display:none; }
■JS
$(function() { $('ul.tab_area li').click(function() { var index = $('ul.tab_area li').index(this); $('.content_area').css('display','none'); $('.content_area').eq(index).show(); $('.tab_area li').removeClass('select'); $(this).addClass('select'); }); var url = location.href; url = (url.match(/\?no=tab\d+$/) || [])[0]; var params = url.split("?"); var tab = params[1].split("="); if($(tab).length){ var tabname = tab[1]; } else { var tabname = "tab1"; } $('.content_area').css('display','none'); $('.tab_area li').removeClass('select'); var tabno = $('ul.tab_area li#' + tabname).index(); $('.content_area').eq(tabno).show(); $('ul.tab_area li').eq(tabno).addClass('select'); });
Aタグが閉めタグしかない
すみません、不要なタグでした。ご指摘ありがとうございます。
質問文内のコードだと結果はどのようになりますか?
<a href="tab2.html?no=tab1#link1">タブ1のlink1へ</a>
をクリックすると
URLはtab2.html?no=tab1#link1になり、tab2.htmlのタブ1に飛びますが、指定した#link1の部分にはなりません。
<a href="tab2.html?no=tab2#link2">タブ2のlink2へ</a>をクリックすると、
URLはtab2.html?no=tab2#link2になりますが、tab2.htmlのタブ1に飛び、指定した#link2の部分にもなりません。
回答2件
あなたの回答
tips
プレビュー