別ページから特定のタブにダイレクトリンクしたいです。
既に作成していたページに追加で
ダイレクトリンクを追加しようと思い、
参考URLを元に記述してみたのですが、
リンク元から飛んだ時は、飛ばしたいタブにダイレクトリンクするようになったのですが、
リンク先の通常タブがactiveにならず正常に動いてくれません。
どこがおかしいのかご教授願えればと思います。
よろしくお願いいたします。。。
参考元
https://irohacross.net/2015/02/jquery_tab.html
下記がリンク元
html
1 <div class="InfoWrap"> 2 <table class="InfoTemp"> 3 <tbody> 4 <tr> 5 <th>あああ</th> 6 <th>いいい</th> 7 <th>ううう</th> 8 <th>えええ</th> 9 <th>おおお</th> 10 </tr> 11 <tr> 12 <td><a href="/page/content#cont05">リンク</a></td> 13 <td>内容</td> 14 <td>内容</td> 15 <td>内容</td> 16 <td>内容</td> 17 </tr> 18 </tbody> 19 </table> 20 </div>
下記がリンク先
html
1 <section> 2 <div class="inner"> 3 <div class="fund-made-to-order newTabHead"> 4 <div class="nav tab-head"> 5 <ul class="cf inner tab_area"> 6 <li class="tab active"><a href="#cont01">あああ</a></li> 7 <li class="tab"><a href="#cont02">いいい</a></li> 8 <li class="tab"><a href="#cont03">ううう</a></li> 9 <li class="tab"><a href="#cont04">えええ</a></li> 10 <li class="tab"><a href="#cont05">おおお</a></li> 11 </ul> 12 </div> 13 14 <div class="tab-body"> 15 16 <div class="cont content_area active" id="cont01"> 17 内容 18 <!--cont--></div> 19 20 21 <div class="cont content_area" id="cont02"> 22 内容 23 <!--cont--></div> 24 25 26 <div class="cont content_area" id="cont03"> 27 内容 28 <!--cont--></div> 29 30 31 32 <div class="cont content_area" id="cont04"> 33 内容 34 <!--cont--></div> 35 36 37 <div class="cont content_area" id="cont05"> 38 内容 39 <!--cont--></div> 40 41 <!--tab-body--></div> 42 <!--inner--></div> 43 </section>
jquery
1// ============================================================== 2// 通常タブ 3// ============================================================== 4 5 $(function(){ 6 $(".tab-head a").click(function(e) { 7 e.preventDefault(); 8 var target = $(this).attr('href'); 9 if (! $(target).length) return false; 10 $('.tab', $(this).closest('.tab-head')).removeClass('active'); 11 $(this).closest('.tab').addClass('active'); 12 $('.cont', $(target).closest('.tab-body')).removeClass('active'); 13 $(target).addClass('active'); 14 }); 15 }); 16 17// ============================================================== 18// ダイレクトリンク 19// ============================================================== 20 21 $(function() { 22 //location.hashで#以下を取得 変数hashに格納 23 var hash = location.hash; 24 //hashの中に#cont~が存在するか調べる。 25 hash = (hash.match(/^#cont\d+$/) || [])[0]; 26 27 //hashに要素が存在する場合、hashで取得した文字列(#cont2,#cont3等)から#より後を取得(cont2,cont3) 28 if($(hash).length){ 29 var tabname = hash.slice(1) ; 30 } else{ 31 // 要素が存在しなければtabnameにcont1を代入する 32 var tabname = "cont01";} 33 //コンテンツを一度すべて非表示にし、 34 $('.content_area').css('display','none'); 35 36 //一度タブについているクラスactiveを消し、 37 $('.tab_area li').removeClass('active'); 38 39 var tabno = $('ul.tab_area li#' + tabname).index(); 40 41 //クリックされたタブと同じ順番のコンテンツを表示します。 42 $('.content_area').eq(tabno).fadeIn(); 43 44 //クリックされたタブのみにクラスactiveをつけます。 45 $('ul.tab_area li').eq(tabno).addClass('active') 46 });
回答1件
あなたの回答
tips
プレビュー