带有jquery的多个选项卡

时间:2011-12-18 17:54:04

标签: javascript jquery tabs

我正在使用以下代码作为标签,它的效果非常好,但我还没弄清楚如何在同一页面上正确显示多个标签集,真的很感激,如果有人能给我一些帮助。

    $("ul.tabs li.label").hide();
$(".tab-set > div").hide();
$(".tab-set > div").eq(0).show();
$("ul.tabs a").click(
  function() {
      $("ul.tabs a.selected").removeClass('selected');
      $(".tab-set > div").hide();
      $(""+$(this).attr("href")).fadeIn('slow');
      $(this).addClass('selected');
      return false;
  }
);
$("#toggle-label").click( function() {
  $(".tabs li.label").toggle();
  return false;
});
$("ul.tabs a[href="+location.hash+"]").click();

HTML:

<!-- tab group 1 -->
<div class="widget">
    <ul class="tabs"> 
        <li><a href="#1" class="selected">tab1</a></li> 
        <li><a href="#2">tab2</a></li> 
    </ul>
    <div class="tab-set">
        <div id="1">
            tab1
        </div>
        <div id="2">
            tab2
        </div>
    </div>

</div>

<!-- tab group 2 -->
<div class="widget">
    <ul class="tabs"> 
        <li><a href="#3" class="selected">tab1</a></li> 
        <li><a href="#4">tab2</a></li> 
    </ul>
    <div class="tab-set">
        <div id="3">
            tab1
        </div>
        <div id="4">
            tab2
        </div>
    </div>
</div>

0 个答案:

没有答案