jQueryにて別タブから特定のタブ内のアンカーポイントまでリンクさせる方法を教えて下さい。

Question

こんばんは

いつも大変勉強させて頂いています。。
今回もjQueryのナビゲーション関連で躓いてしまい助けを求めにきました。。

まずページ上部に普通のタブナビゲーションを設置しました。（このくらいは問題ありません）
ですが、ページ下部にある「その他タブのアイテム2種」のアイテムをクリック後、
タブを切り替えてから指定のアイテムIDのところまでページ内リンク（アンカー？）する方法がどうしても分かりません。

※頑張って図解にしてみたので、そちらを参照していただけると幸いです。

参考サイトとして
・別ページから特定のタブにダイレクトリンクする方法
・jQuery タブ内にあるアンカーポイントへのダイレクトリンクの仕方を教えてください。
などを参考にしてみたのですがなかなかうまくいかず。。

いつも説明が下手でご迷惑をお掛けしてしまってますが不明な点があれば教えてください。
よろしくお願いいたします！！

以下コード

<nav class="navigation">
    <ul>
    <li class="cate_01"><a href="#c01">#c01</a></li>
    <li class="cate_02"><a href="#c02">#c02</a></li>
    <li class="cate_03"><a href="#c03">#c03</a></li>
    <li class="cate_04"><a href="#c04">#c04</a></li>
    <li class="cate_05"><a href="#c05">#c05</a></li>
    <li class="cate_06"><a href="#c06">#c06</a></li>
    </ul><ul>
    <li class="cate_07"><a href="#c07">#07</a></li>
    <li class="cate_08"><a href="#c08">#08</a></li>
    <li class="cate_09"><a href="#c09">#09</a></li>
    <li class="cate_10"><a href="#c10">#10</a></li>
    <li class="cate_11"><a href="#c11">#11</a></li>
    <li class="cate_12"><a href="#c12">#12</a></li>
    </ul><ul>
    <li class="cate_13"><a href="#c13">#13</a></li>
    <li class="cate_14"><a href="#c14">#14</a></li>
    <li class="cate_15"><a href="#c15">#15</a></li>
    <li class="cate_16"><a href="#c16">#16</a></li>
    <li class="cate_17"><a href="#c17">#17</a></li>
    <li class="cate_18"><a href="#c18">#18</a></li>
    </ul>
</nav>

<div id="c01" class="cateBody">
<h1>コンテンツ(#c01)タイトル</h1>
<ul>
 <li>
  <div id="c01-i1" class="itemWrap">
   <img><p>テキスト</p>
  </div><!-- #c01-i1 .itemWrap -->
 </li>
 <li>
  <div id="c01-i2" class="itemWrap">
   <img><p>テキスト</p>
  </div><!-- #c01-i2 .itemWrap -->
 </li>
 <li>
  <div id="c01-i3" class="itemWrap">
   <img><p>テキスト</p>
  </div><!-- #c01-i3 .itemWrap -->
 </li>
</ul>
<h2>その他タブのアイテム2種</h2>
<ul>
 <li>
  <a href="/#c04-i18"><img><p>テキスト</p></a>
 </li>
 <li>
  <a href="/#c17-i50"><img><p>テキスト</p></a>
 </li>
</ul>
</div><!-- #c01 .cateBody -->

<div id="c02" class="cateBody">
<h1>コンテンツ(#c02)タイトル</h1>
<ul>
 <li>
  <div id="c02-i4" class="itemWrap">
   <img><p>テキスト</p>
  </div><!-- #c02-i4 .itemWrap -->
 </li>
 <li>
  <div id="c02-i5" class="itemWrap">
   <img><p>テキスト</p>
  </div><!-- #c02-i5 .itemWrap -->
 </li>
 <li>
  <div id="c02-i6" class="itemWrap">
   <img><p>テキスト</p>
  </div><!-- #c02-i6 .itemWrap -->
 </li>
</ul>
<h2>その他タブのアイテム2種</h2>
<ul>
 <li>
  <a href="/#c01-i1"><img><p>テキスト</p></a>
 </li>
 <li>
  <a href="/#c14-i36"><img><p>テキスト</p></a>
 </li>
</ul>
</div><!-- #c02 .cateBody -->
```※（#c02までしか用意はしていません）

```javascript
//グローバルメニュータブ切り替え
  $(".navigation li a").on("click", function() {
	  $("main .cateBody").hide();
  	$($(this).attr("href")).fadeToggle();
  	$(this).toggleClass("active");
  });

※参考までに
■アイテムIDの付与ルール
・「c01」=カテゴリIDの連番
・「i1」=アイテムIDの連番
上記2つのそれぞれ独立した連番がハイフンで繋がっている状態です。
（例「c01-i1」は◯だが、「c02-i1」は×）
順番も変わる可能性があるので[i++]で自動的に増えていく形ではなく、ID決め打ちでダイレクトリンクしたいと思っています。

※追記「別ページ」ではなく、「別タブ」です。失礼いたしました。

※追記
独自データ属性の[data-foo={$foo}]で試みたのですがこちらも出来ませんでした。。
（書き方が悪いだけかもしれませんが。）

<h2>その他タブのアイテム2種</h2>
<ul>
 <li>
  <a href="/#c02" data-foo="#c02-i4"><img><p>テキスト</p></a>
 </li>
 <li>
  <a href="/#c02" data-foo="#c06-i21"><img><p>テキスト</p></a>
 </li>
</ul>

  $(".navigation li a , .combinationPattern li a").on("click", function() {
	  $("main .cateBody").hide();
  	$($(this).attr("href")).fadeToggle();
  	$(this).toggleClass("active");
  	// window.location = "/#c02-i4";

  	var dataAttr = $(this).attr("data-foo");
  	if( typeof dataAttr ) {
  		window.location = $(this).data(foo);
  	}
  });
  });

Answer 1

sekitaka_1214さんのご回答で上手くいくと思うんですが。

別解として

<a href="#c04-i18"><img><p>テキスト</p></a>

href属性を少し変えて、

$('.otherLink li a').on('click',function(e){
  var target = e.currentTarget.hash.split('-')[0];
  $(target).show();
  $("main .cateBody:not("+target+")").hide();
  return true;
});

とかでも上手くいきませんかね。アンカー移動にshowが間に合わないかな？


#####サンプル追加
https://jsfiddle.net/joLr09on/

Comments

[cotton88]

クリックしても何も反応が返ってきません。。

[cotton88]

ちなみにjQueryのバージョンはjquery-2.1.4.min.jsなのですが関係ないですよね。念の為にお伝えしました。

[anaprestoo]

otherLinkのつけ忘れなどはないでしょうか？

[Lhankor_Mhy]

あー、間違えてました。訂正します。

[cotton88]

ありがとうございます！無事に解決しました！
タブが変わった後に下記のコードを付け加えてアイテムにアンカー移動できるようにしました。

var itemTarget = $(this).attr("href");
window.location = itemTarget;
return true;

ベストアンサーに選ばせていただきました。
また機会があればよろしくお願いいたします！

Answer 2

別ページとありますが、内容を見ると同じページ内の別タブという理解でよいでしょうか。
タブの切替まで、うまくいっているのであれば、以下のように移動できませんか？

        window.location.href = '#to7' ;

<li id="to7">
        行きたいところ
</li>

Comments

[cotton88]

仰るとおり「別ページ」ではなく、「別タブ」です。失礼いたしました。

ページ上部のタブでは切り替えられます。ただページ下部のリンクから特定のタブにダイレクトリンクする方法 がわかりません。なのでご回答いただいて申し訳ないのですがこちらではうまくできません。

[sekitaka_1214]

タブ切り替え後に、
```JavaScript
window.location.href = '#いきたいところ' ;
```
を実行してもダメですか？

[cotton88]

```html
<h2>その他タブのアイテム2種</h2>
<ul class="otherLink">
<li>
<a href="/#c01-i1"><img><p>テキスト</p></a>
</li>
<li>
<a href="/#c14-i36"><img><p>テキスト</p></a>
</li>
</ul>
```

として、

```javascritp
$(".navigation li a , .otherLink li a").on("click", function() {
$("main .cateBody").hide();
$($(this).attr("href")).fadeToggle();
$(this).toggleClass("active");
window.location = "/#c14-i36";
});
```
としてみたのですが出来ませんでした。。

[Lhankor_Mhy]

"/#c14-i36"の/がいらないと思いますよ。

[cotton88]

Lhankor_Mhy様

ご回答ありがとうございます。
ご指摘の通りやってみたのですが、

<div id="c01" class="cateBody">も
<div id="c02" class="cateBody">にも
style="display: none;" が付いてしまってコンテンツが空になってしまいました。

押下するhrefは<a href="#c14-i36"><img><p>テキスト</p></a>となっております。