Question

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

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

以下是一些代码片段：首先是处理逻辑的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>

Answer 1

您尝试从已激活的标签内容中删除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');
    });
});

Answer 2

用div类包装div中的左右标签栏，选择根据该类删除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

两个活动标签同时出现！我该怎么办？

2 个答案: