同时有两个活动标签！我该怎么办？答案

【问题标题】：Two active tabs at the same time! How do I do?同时有两个活动标签！我该怎么办？
【发布时间】：2017-12-13 10:36:02
【问题描述】：

我正在开发的网站有两个并排的面板和标签。它需要同时激活两个面板。如果我切换右侧的面板，左侧的面板仍应显示其内容。现在，在我选择切换任何面板上的选项卡后，只有一个选项卡处于活动状态。

我确实开始使用 Bootstrap，但决定将其从项目中删除。然后我编写了新的 SCSS，修改了 HTML 并创建了一个新的 javascript 文件。

这里有一些代码 sn-ps：首先是处理逻辑的 Javascript 文件。然后你可以看到左边栏的代码，面板上的内容等等。

$(document).ready(function() { /*Javascript for the left bar */
  $('ul.nav li').click(function() {
    var tab_id = $(this).attr('data-tab');

    $('ul.nav li').removeClass('current');
    $('.tab-content').removeClass('current');

    $(this).addClass('current');
    $("#" + tab_id).addClass('current');
  });

  $('ul.cor.li').click(function() { /*Javascript for the right bar */
    var tab_id = $(this).attr('data-tab');

    $('ul.cor.li').removeClass('active');
    $('.tab-content').removeClass('active');

    $(this).addClass('active');
    $("#" + tab_id).addClass('active');
  });
});

ul.nav li {
  list-style-type: none;
  display: inline;
  overflow: hidden;
  padding: 3px 15px;
  cursor: pointer;
}

.tab-content {
  display: none;
  background: white;
  padding: 15px;
}

.tab-content.current {
  display: inherit;
}

.navbar-light {
  border-left-color: black;
}

.nav,
.tabs {}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<!-- left side bar -->

<div class="flex-container">
  <div class="overview-flexbox-mid">
    <div id="leftPanel">
      <ul class="nav nav-tabs navbar-light bg-light" id="leftTabs">
        <li class="nav-item nav-link current" data-tab="tab-1"><i class="fa fa-compress" aria-hidden="true"></i> Subject1
        </li>
        <li class="nav-item nav-link" data-tab="tab-2"><i class="fa fa-book" aria-hidden="true"></i> Subject2
        </li>
      </ul>
    </div>
  </div>
</div>

<div id="tab-1" class="tab-content current">
  <div class="flex-container-horizontal" id="leftPanelContent1">
    <h1>Some text</h1>
  </div>
</div>

<!-- left side content -->
<div id="tab-2" class="tab-content">
  <h1>More text</h1>
</div>


<!-- right side bar -->

<div class="overview-flexbox-mid">
  <div id="rightPanel">

    <ul class="cor nav nav-tabs navbar-light bg-light" id="rightTabs">
      <li class="nav-item nav-link active" data-tab="tab-5"><i class="fa fa-bar-chart" aria-hidden="true"></i> Subject3
      </li>
      <li class="nav-item nav-link" data-tab="tab-6"><i class="fa fa-signal" aria-hidden="true"></i> Subject4
      </li>
    </ul>
  </div>
</div>

<!--right side content-->

<div id="tab-5" class="tab-content active">
  <div class="flex-container-horizontal">
    <h1>Content</h1>
  </div>
</div>
<div id="tab-6" class="tab-content">
  <h1>Content 2</h1>
</div>

【问题讨论】：

您能提供一张图表说明这应该是什么样子吗？
现在您正在从整个文档中的 all ul.nav li 和 .tab-content 元素中删除 current 类。当然，您需要将该选择限制在更合理的范围内……例如在单击项目的父元素中。

标签： javascript jquery html css tabs

【解决方案1】：

将左右标签栏包裹在一个div中，类为wrap，选择删除基于该类的current类

<div class="wrap">
......
      <div id="leftPanel"></div>
......
</div>

<div class="wrap">
......
      <div id="rightPanel"></div>
......
</div>

js:

$('.nav li').click(function() {
  var tab_id = $(this).attr('data-tab');

  $(this).closest('.wrap').find('ul.nav li,.tab-content').removeClass('current');

  $(this).addClass('current');
  $("#" + tab_id).addClass('current');
})

demo

【讨论】：

谢谢！标签工作得很好！一个非常好的解决方案，我很高兴js代码非常紧凑。
很高兴你喜欢它

【解决方案2】：

您试图从已激活的选项卡内容中删除 active 类，但虽然两个选项卡内容具有相同的类名称，但两者都将失去其 active 类。修改如下：

$(document).ready(function () {
    $('ul.nav li').click(function () {
        var tab_id = $(this).attr('data-tab');

        $(this).removeClass('current');
        $(this).find('.tab-content').removeClass('current');// modify this

        $(this).addClass('current');
        $("#" + tab_id).addClass('current');
    });

    $('ul.cor.li').click(function () {
        var tab_id = $(this).attr('data-tab');

        $(this).removeClass('active');
        $(this).find('.tab-content').removeClass('active');

        $(this).addClass('active');
        $("#" + tab_id).addClass('active');
    });
});

【讨论】：