jqueryのタブを複数設置

Question

オリジナルのjqueryのタブを改修したいです。
タブを同一ページに設置するとidで取得しているので、複数設置するとタブが動かなくなります。
こちらをクラスに変更して複数設置しても動くようにしたいのですが、知識不足でどうにも出来ず
レクチャーいただければ幸いです。

※idからクラスに変えるだけでは勿論ダメした。

<div class="tabs">
  <ul class="tabsmenu">
    <li id="tab1"><a href="#panel1">text</a></li>
    <li id="tab2"><a href="#panel2">text</a></li>
    <li id="tab3"><a href="#panel3">text</a></li>
  </ul>
  <div class="tabcontent">
    <section id="panel1" class="panel">
      text
    </section>
    <section id="panel2" class="panel">
      text
    </section>
  </div>
</div>

<div class="tabs">
  <ul class="tabsmenu">
    <li id="tab1"><a href="#panel1">text2</a></li>
    <li id="tab2"><a href="#panel2">text2</a></li>
    <li id="tab3"><a href="#panel3">text2</a></li>
  </ul>
  <div class="tabcontent">
    <section id="panel1" class="panel">
      text2
    </section>
    <section id="panel2" class="panel">
      text2
    </section>
  </div>
</div>

$('a[href^="#panel"]').click(function () {
  $('.tabs .panel').hide();
  $('a').removeClass('active');
  $(this).toggleClass('active');
  $(this.hash).fadeIn();
  return false;
});
$('a[href^="#panel"]:eq(0)').trigger('click');



var hash = location.hash;
hash = (hash.match(/^#tab\d+$/) || [])[0];


if($(hash).length){
  var tabname = hash.slice(1) ;
} else{
  var tabname = "tab1";
}


$('.tabs .panel').hide();
$('.tabs a').removeClass('active');


var tabno = $('.tabs li#' +  tabname).index();


$('.tabs .panel').eq(tabno).fadeIn();


$('.tabs a').eq(tabno).addClass('active');

Answer 1

ユニークなIDをつければ済む話では？
（ユニークでないIDを設定した時点で文法的な違反ですし）

Comments

[nanashissss]

ありがとうございます！
言われた通りに行ったら同一ページでタブをもう一つ設置できました。