【jQuery】タブでコンテンツ切り替え且つ上下連動

タブでコンテンツ内容を切り替えるというのは
まぁ、よくある感じだとは思いますが
今回、コンテンツ内容が長かった為、上下にタブを配置。
コンテンツを最後まで見ると上部のタブはもはや遥か彼方だったので。
こんな長いコンテンツもどうかと思うがね。

となると当然上下のタブは連動していないと挙動がおかしな事になる。
アクティブとかなければごまかせるかもしれないが
やはり現状どのタブを開いているのか分かりやすくするのが
ユーザビリティ的にも人としても親切ってもんでしょう。

て事で上下のタブが連動している諸々の書き方。

[HTML]

<div class="clmn">
  <ul class="tab top">
    <li class="case01">ケース1</li>
    <li class="case02">ケース2</li>
    <li class="case03">ケース3</li>
    <li class="case04">ケース4</li>
  </ul>
  <ul id="tab_cont">
    <li class="content">ケース1の内容</li>
    <li class="content">ケース2の内容</li>
    <li class="content">ケース3の内容</li>
    <li class="content">ケース4の内容</li>
  </ul>
  <ul class="tab btm">
    <li class="case01">ケース1</li>
    <li class="case02">ケース2</li>
    <li class="case03">ケース3</li>
    <li class="case04">ケース4</li>
  </ul>
</div><!-- /.clmn -->

[CSS]

/* --------------- tab --------------- */
.tab {
  overflow: hidden;
  width: 980px;
}
.tab.top{
  margin: 5% auto 2%;
}
.tab.btm{
  margin: 2% auto 5%;
}
.tab li {
  background: #cccccc;
  padding: 1% 5%;
  float: left;
  margin-right: 1px;
  border-right: solid 1px #cccccc;
  border-bottom: solid 1px #cccccc;
  border-left: solid 1px #cccccc;
}
.tab li:hover {
  cursor: pointer;
  opacity: 0.7;
}
.tab li.current {
  background: #ffffff;
}
.tab li.current:hover {
  cursor: default;
  opacity: 1;
}
.case01 {
  border-top: solid 5px #2faf40;
}
.case02 {
  border-top: solid 5px #af982e;
}
.case03 {
  border-top: solid 5px #af582d;
}
.case04 {
  border-top: solid 5px #b12f79;
}

[jQery]

//上下タブ切り替え
$(function(){
  $('.tab>li').click(function() {
    var num = $(this).parent().children('li').index(this);
      $('.tab').each(function(){
      $('>li',this).removeClass('current').eq(num).addClass('current');
    });
    $('#tab_cont .content').hide().eq(num).show();
  }).first().click();
});

これで上下のタブが連動した切り替えが出来ます。

が！

今回、コンテンツ内容が長い案件だからこその上下タブ設置。
コンテンツ見終わったら下部のタブで切り替えればおkおk〜
って本当に？
なぜかって下部で内容は切り替えられても
ページに表示されるのは
中途半端な位置から始まるコンテンツ！

こんな途中から始まったコンテンツ、
閲覧してくださっている方に一々スクロールし直させるなら
下部にタブがある意味がない！

すなわち、下部のタブをクリックしたら
コンテンツが切り替わって尚且つコンテンツ上部に移動させなきゃいけません。

てことで、改めてこちら↓

[HTML]

<div class="clmn">
  <ul class="tab top" id="tab_top">
    <li class="case01">ケース1</li>
    <li class="case02">ケース2</li>
    <li class="case03">ケース3</li>
    <li class="case04">ケース4</li>
  </ul>
  <ul id="tab_cont">
    <li class="content">ケース1の内容</li>
    <li class="content">ケース2の内容</li>
    <li class="content">ケース3の内容</li>
    <li class="content">ケース4の内容</li>
  </ul>
  <ul class="tab btm">
    <li class="case01" data-url="#tab_top">ケース1</li>
    <li class="case02" data-url="#tab_top">ケース2</li>
    <li class="case03" data-url="#tab_top">ケース3</li>
    <li class="case04" data-url="#tab_top">ケース4</li>
  </ul>
</div><!-- /.clmn -->

CSSは変更なしなので、省きます。

[jQery]

//上下タブ切り替え
$('.tab>li').click(function() {
  var num = $(this).parent().children('li').index(this);
    $('.tab').each(function(){
    $('>li',this).removeClass('current').eq(num).addClass('current');
  });
  $('#tab_cont .content').hide().eq(num).show();
}).first().click();
$('.btm > li').click(function() {
  location.href = $(this).attr('data-url');
});

としてみました。

これで下部のタブをクリックしたら
コンテンツ内容が切り替わった上に
ちゃんとコンテンツ上部に移動した！
よしゃ！
と思ったのも束の間。

ん？

一回開いたタブをもう一度クリックすると
ページトップに飛ばされちゃうよ？？

で、再度書き直したjQeryがこれ↓

[jQery]

//上下タブ切り替え
$('.tab>li').click(function() {
  var num = $(this).parent().children('li').index(this);
    $('.tab').each(function(){
    $('>li',this).removeClass('current').eq(num).addClass('current');
  });
  $('#tab_cont .content').hide().eq(num).show();
}).first().click();
$('.btm > li').click(function() {
  location.hash = "";
  location.hash = "section2";
});

location.hash = "";
location.hash = "section2";

となっているのは

location.hash = "section2";

だけだと同じ様に2回目以降のクリックで
希望の箇所にきちんと遷移しないという現象が起こったからです。

どうやらハッシュの値が同じだと始動しないようなんですね。

でもこの書き方はかなり無理矢理感が否めない・・・。
どうするのがいいのかなぁ？

更に言うなら本当の希望は
URLにハッシュidを付けたくない・・・。

うーーーん不完全燃焼。