在同一页面上有多个 jquery 选项卡答案

【问题标题】：Have multiple jquery tabs on the same page在同一页面上有多个 jquery 选项卡
【发布时间】：2017-03-11 14:46:03
【问题描述】：

我真的需要一些关于 jquery 选项卡的帮助。我已经找到了我要问的问题的一些答案，但问题是大多数 jquery 选项卡使用“a”标签进行导航，我花时间让我的标签在没有“a”标签的情况下工作。我想保持这种状态是有充分理由的。

这是我的问题。我有一个运行良好的 jquery 选项卡。但是当我尝试在同一页面中放置多个标签时，它会相互矛盾。

这是jsfiddle 的链接。我试图复制 jquery 代码并更改 ID 和类以符合第二个选项卡，但似乎无法让它工作。

假设我的主页上有 5 个内容部分，我希望第 2 部分和第 5 部分有标签。

这是css：

#tabs-nav-wrap {padding:10px 0; text-align: center;}
#tabs-nav-wrap ul {display: inline-block; list-style: none;}

#tabs-nav-wrap ul li {
  list-style: none;
  display: inline-block;

  margin:0 3px;
}
#tabs-nav li {
  list-style: none;
  display: block;
  padding:10px 20px;
  background: #736565;
  font-size: 16px;
  font-weight: 300;
  cursor: pointer;
  color: #fff;
  text-align: left;
  text-decoration: none;
  border:1px solid #615656;
}

#tabs-nav .tab-nav-link.current,
#tabs-nav .tab-nav-link:hover {
  border:1px solid #5eaace;
  background: #74c1e4;
}

.tab-content {padding:20px 0; text-align: center;}

这是 HTML：

    <div id="tabs-nav-wrap">
        <ul id="tabs-nav">
            <li class="tab-nav-link" data-target="#tab-one">TAB 1</li>
            <li class="tab-nav-link" data-target="#tab-two">TAB 2</li>
            <li class="tab-nav-link" data-target="#tab-three">TAB 3</li>        
         </ul>
       <div style="clear:both;"></div>
     </div><!-- ends tabs-nav-wrap -->    


 <div class="tabs-main-content">

      <div id="tab-one" class="tab-content"><!-- Begins tab-one -->
         <div class="tab-inner">
            <p>Tab 1 content here.</p>
         </div>
      </div>

      <div id="tab-two" class="tab-content"><!-- Begins tab-two -->
         <div class="tab-inner">
            <p>Tab 2 content here.</p>
         </div>
      </div>

      <div id="tab-three" class="tab-content"><!-- Begins tab-three -->
         <div class="tab-inner">
            <p>Tab 3 content here.</p>
         </div>
      </div>    

    <div style="clear:both;"></div>
  </div><!-- # tabs-main-content -->

这是我的 jquery 代码的样子：

$(function() {
  $('.tab-content:not(:first)').hide();
  $('#tabs-nav .tab-nav-link').bind('click', function(e) {
    $this = $(this);
    $target = $($this.data("target")); // get the target from data attribute
    $('#tabs-nav .tab-nav-link.current').removeClass('current');
    $('.tab-content:visible').fadeOut("fast", function() {
      $this.addClass('current');
      $target.fadeIn("fast");
    });
  }).filter(':first').click();
});

我真的需要一些帮助。提前致谢！

【问题讨论】：

小提琴似乎工作正常
@ILikeToMoveItMoveIt 是的，小提琴正在工作。请阅读我的问题以了解我要完成的工作。我想在同一页面上有多个标签。例如，内容部分 2 上的第一个选项卡和（第二个）内容部分 5 上的另一个选项卡。

标签： javascript jquery html css tabs

【解决方案1】：

使用class 而不是id，它们是唯一的选择器，您希望使用相同的代码处理多个选项卡。还可以使用siblings() 隐藏或删除非活动元素的类。这里更新了fiddle

【讨论】：