Question

使用非常基本的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 -->

Answer 1

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

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

Answer 2

你可以使用Jquery标签，它可以在一个中使用multipe，没有唯一类的工作可以是所有表的同一个类。 https://jqueryui.com/tabs/

检查并复制多个时间标签但是将ID更改为类，并且在jquery中也可以。

使用jQuery在同一页面上有多个选项卡

2 个答案: