0

非常基本的 JQ 选项卡有一些问题

我需要在同一页面上有 3 或 4 个相同的选项卡。我得到了这个 JQ 代码，它适用于一个选项卡，尽管当我单击其他选项卡时，第一个选项卡的内容只会改变。

有人可以告诉我一个解决方法来实现这个。

这是我使用的代码

$(document).ready(function(){
$('ul.tabs').each(function(){
var $active, $content, $links = $(this).find('a');
$active = $($links.filter('[href="'+location.hash+'"]')[0] || $links[0]);
$active.addClass('active');
$content = $($active.attr('href'));

$links.not($active).each(function () {
    $($(this).attr('href')).hide();

});

// Bind the click event handler
       $(this).on('click', 'a', function(e){
    $active.removeClass('active');
    $content.hide();
    $active = $(this);
    $content = $($(this).attr('href'));
    $active.addClass('active');
    $content.show();
    e.preventDefault();
  });
});

});

这是 HTML

 <div class="bluetabs"> 
  <ul class='tabs'>
    <li><a href='#tab1'>WEB DESIGN</a></li>
    <li><a href='#tab2'>GRAPHIC DESIGN</a></li>
  </ul>
  <div class="bluetabContent"> 
      <div id='tab1'>
       ...
      </div>
      <div id='tab2'>
      ...
      </div>

  </div>
</div><!-- BLUE TABS -->

<div class="greentabs"> 
  <ul class='tabs'>
    <li><a href='#tab1'>WEB DESIGN</a></li>
    <li><a href='#tab2'>GRAPHIC DESIGN</a></li>
  </ul>
  <div class="bluetabContent"> 
      <div id='tab1'>
       ...
      </div>
      <div id='tab2'>
      ...
      </div>

  </div>
</div><!-- GREEN TABS -->

<div class="redtabs"> 
  <ul class='tabs'>
    <li><a href='#tab1'>WEB DESIGN</a></li>
    <li><a href='#tab2'>GRAPHIC DESIGN</a></li>
  </ul>
  <div class="bluetabContent"> 
      <div id='tab1'>
       ...
      </div>
      <div id='tab2'>
      ...
      </div>

  </div>
</div><!-- RED TABS -->
4

2 回答 2

1

您可以使用 Jquery 选项卡，它可以多合一使用，并且在没有唯一类的情况下工作可以是所有表的同一个类。 https://jqueryui.com/tabs/

检查这一点并复制多个时间选项卡，但将 ID 更改为 class，并且在 jquery 中也可以使用。

于 2014-03-12T21:38:02.943 回答
1

保持您的 ID 属性在 html 文档中唯一，例如Ref。

所以简而言之，将标签 ID 更改为 tab1、tab2、tab3 和 tab4 将解决问题。

于 2013-07-04T11:46:02.293 回答