(K)jQueryでタブパネルを1ページに複数設置する場合の方法

以前、jQueryで作成する「スマホでも実装可能なサイズ可変型タブパネル」の記事を書きましたが、1ページにタブパネルを複数作成すると、表示がおかしくなります。
「メインページにタブパネル」「サイドバーにタブパネル」と2つ作成すると、お互いの命令が干渉しあってタブ展開がうまくいきません。
複数設置できないと具合の悪い場合もあるので、今回は別案として、複数タブパネルを設置したい場合の備忘録。

以前のやり方でタブを2つ設置すると問題が・・・

以前のサンプルに例えばコードをごそっとコピーすると、2つ目のタブをクリックしても1つ目のタブが開閉するだけでうまくいきません。
単純に「href」のリンクと「li」のIDの番号を書きなおせばいけそうな感じでしたが、以下のような現象が起こってうまく行きません。

1.最初に表示されるページが2つ目のタブパネルが見えない。
2.どちらか片方のタブをクリックすると他のタブが非表示になってしまう。

DEMO

これでは、全然よろしくないので色々ググッて、別のタブパネルの作成方法を見つけました。

複数タブパネルを設置してもちゃんと動くコード

【HTML】

<!--（ひとつ目のタブ）-->
<ul class="tabs">
  <li id="tab1" class="tab active"><a href="#cont1">タブ01</a></li>
  <li id="tab2" class="tab"><a href="#cont2">タブ02</a></li>
  <li id="tab3" class="tab"><a href="#cont3">タブ03</a></li>
</ul>
<ul class="panels">
    <li id="cont1" class="panel active">
    タブ01の内容タブ01の内容タブ01の内容タブ01の内容タブ01の内容
    </li><!---#cont1-->
    <li id="cont2" class="panel">タブ02の内容タブ02の内容タブ02の内容タブ02の内容タブ02の内容</li><!---#cont2-->
    <li id="cont3" class="panel">タブ03の内容タブ03の内容タブ03の内容タブ03の内容タブ03の内容</li><!---#cont3-->
</ul>
<!--（ひとつ目のタブ）-->

<!--（２つ目のタブ）-->
<ul class="tabs">
  <li id="tab1" class="tab active"><a href="#cont2_01">タブ04</a></li>
  <li id="tab2" class="tab"><a href="#cont2_02">タブ05</a></li>
  <li id="tab3" class="tab"><a href="#cont2_03">タブ06</a></li>
</ul>
<ul class="panels">
    <li id="cont2_01" class="panel active">もう一つのタブ01の内容もう一つのタブ01の内容もう一つのタブ01の内容</li><!---#cont2_01-->
    <li id="cont2_02" class="panel">もう一つのタブ02の内容もう一つのタブ02の内容もう一つのタブ02の内容</li><!---#cont2_02-->
    <li id="cont2_03" class="panel">もう一つのタブ03の内容もう一つのタブ03の内容もう一つのタブ03の内容</li><!---#cont2_03-->
</ul><!--.panels-->
<!--（２つ目のタブ）-->

タブ用のリストとコンテンツ用のリストを記述。
タブボタンのリストのアンカータグの「#cont1」とコンテンツのリストのIDを「#cont1」で同じようにひも付けます。

【jQuery】

$(function () {
  $(".tabs a").on('click', function(e) {
    e.preventDefault();
    var target = $(this).attr('href');
    if (! $(target).length) return false;
    $('.tab', $(this).closest('.tabs')).removeClass('active');
    $(this).closest('.tab').addClass('active');
    $('.panel', $(target).closest('.panels')).removeClass('active');
    $(target).addClass('active');
  });
});

本ちゃんのjQueryが読み込まれてるのが大前提として、上記の記述を追加します。
HTMLのコードとの連動はこっちのコードと合わせれば問題なしですね。

タブリストの全体囲み→「ul.tabs」
タブリストのリンク→「li.tab」
コンテンツの全体囲み→「ul.panels」
切り替わるコンテンツ→「li.panel」

【CSS】

body{
    width:98%;
    min-width: 320px;
    margin: 0;
    padding:10% 1%;
}
a{
    text-decoration: none;
}
li{
    list-style: none;
}
li a{
    display: block;
    text-align: center;
    color: #b4b4b4;
}
ul.tabs li{
    float: left;
    border-top: 1px solid #000;
    border-left: 1px solid #000;
    border-right: 1px solid #000;
    width:30%;
    margin-left:2%;
    line-height: 250%;
}
ul.tabs li.active a{
    background-color: #FFF;
    color:#000;
}
ul.panels{
    clear:both;
    padding:3% 2%;
    border: 1px solid #000;
    position: relative;
    top:-1px;
    z-index: -1;
}
ul.panels > li.panel {
  display: none;
}
ul.panels > li.panel.active {
  display: block;
}

CSSでのデザイン調整は以前のタブ画面と同じです。
デザイン調整をする場合はCSSで調整ですが、ポイントとしては非表示にさせているコンテンツ部分の記述を「ul.panels > li.panel」にして子要素のみに「display:none」を指定します。
「>」がないとコンテンツ内に「ul li」を使うとそれも非表示になってしまいます。

※タブのデザインを別々にしたい場合はclassを複数つけるなどすれば、問題なくできますね。

DEMO

よっぽど情報量の多いサイトじゃないとタブ画面が１ページに複数あるって事もすくないんでしょうが、サイドバーに複数設置する場合もあるかと思うので、覚えておいて損はないかと・・・。今回は以上です。