別ページからのタグアクセス

Question

https://irohacross.net/2015/02/jquery_tab.html
こちらのサイトを参考に、タグの切り替えを実装しましたが、jQueryダイレクトリンクのソースではタグの切り替えが動作せず、jQuery通常タグの方も併記すると動作いたしました。

また、別ページからアンカーリンクのタグは開いたのですが、同ページからのリンクではうまくタグが切り替わらず、何か間違えていることはありますでしょうか？

よろしく、ご教授いたたければ助かります。

Comments

[kakkun61]

Haskell タグが付いていますが Haskell とは全く関係ないようです。

[m.ts10806]

間違いもなにも再現確認できるコードがないと何も言えません。
参考サイトはあくまで参考。
問題が起きているのは質問者さんが書いたコードです。

[jiko676]

html(リンク元)
<ul>
<li><a href="tab2.html#tab1">このリンクはTab1に飛びます。</a></li>
<li><a href="tab2.html#tab2">このリンクはTab2に飛びます。</a></li>
<li><a href="tab2.html#tab3">このリンクはTab3に飛びます。</a></li>
</ul>

リンク先(タブ)
<div class="all_area">
<ul class="tab_area">
<li id="tab1" class="select">Tab1</li>
<li id="tab2">Tab2</li>
<li id="tab3">Tab3</li>
</ul>
<!-- tab1 start -->
<div class="content_area">
<ul class="list_area">
<li>これはTab1の内容です</li>
<li>これはTab1の内容です</li>
<li>これはTab1の内容です</li>
<li>これはTab1の内容です</li>
</ul>
<!-- /tab1 end -->
</div>
<!-- tab2 start -->
<div class="content_area hide">
<p>これはTab2の内容です。これはTab2の内容です。これはTab2の内容です。これはTab2の内容です。これはTab2の内容です。これはTab2の内容です。</p>
<!-- /tab2 end -->
</div>
<!-- tab3 start -->
<div class="content_area hide">
<p>これはTab3の内容です<br>
<img src="tabsample.gif" width="300" height="150">
</p>
<!-- /tab3 end -->
</div>
<!-- /tab area end -->
</div>

jQuery
//ダイレクトリンク
$(function() {
//location.hashで#以下を取得 変数hashに格納
var hash = location.hash;
//hashの中に#tab～が存在するか調べる。
hash = (hash.match(/^#tab\d+$/) || [])[0];

//hashに要素が存在する場合、hashで取得した文字列（#tab2,#tab3等）から#より後を取得(tab2,tab3)
　　　　if($(hash).length){
var tabname = hash.slice(1) ;
} else{
　　　　// 要素が存在しなければtabnameにtab1を代入する
　　　　var tabname = "tab1";}
//コンテンツを一度すべて非表示にし、
$('.content_area').css('display','none');

//一度タブについているクラスselectを消し、
$('.tab_area li').removeClass('select');

var tabno = $('ul.tab_area li#' + tabname).index();
//クリックされたタブと同じ順番のコンテンツを表示します。
$('.content_area').eq(tabno).fadeIn();
//クリックされたタブのみにクラスselectをつけます。
$('ul.tab_area li').eq(tabno).addClass('select')

$('ul.tab_area li').click(function() {
//.index()を使いクリックされたタブが何番目かを調べ、
// indexという変数に代入します。
var index = $('ul.tab_area li').index(this);

//コンテンツを一度すべて非表示にし、
$('.content_area').css('display','none');

//クリックされたタブと同じ順番のコンテンツを表示します。
$('.content_area').eq(index).fadeIn();

//タブについているクラスselectを消し、
$('.tab_area li').removeClass('select');

//クリックされたタブのみにクラスselectをつけます。
$(this).addClass('select')
});
});

こういう感じになります。
これでリンク元が別ページの時は指定のタブを開いた状態でアクセスするのですが、
同ページにある時は、タブへ移動して指定のタブが開かないという事です。

よろしくお願いいたします。

Answer 1

ちょっと個人的に気に入らないコードでしたので簡単に作ってみました。

No jQueryで書いてみました。

<a href=#view-box1>1個目を表示</a> , 
<a href=#view-box2>2個目を表示</a> , 
<a href=#view-box3>3個目を表示</a>
<div id=parent>
  <div id=box1>1個目のものだよ</div>
  <div id=box2><div>2個目のものだよ</div></div>
  <div id=box3>3個目のものだよ</div>
</div>

#box2,#box3 {
  display: none
}

function change() {
  var hash = location.hash;
  if(hash.replace('#view-','')!==''){
    var target = hash.replace('#view-','');
    var children = document.getElementById('parent').children;
    for(i=0;i<children.length;i++){
      document.getElementById(children[i].id).style.display = 'none';
    }
    document.getElementById(target).style.display = 'block';
  }
}
window.onload = change;
window.onhashchange = change;

ハッシュ値が「view-なんとか」
で
IDが「parent」の中に入っている
IDが「なんとか」を表示できます。

サンプル