代码之家 › 专栏 › 技术社区 › josefdev

同时有两个活动选项卡!我该怎么办?

tabs css html jquery javascript

josefdev · 技术社区 · 8 年前

我正在工作的网站有两个面板,旁边有选项卡。它需要同时激活两个面板。如果我切换右侧的面板,左侧的面板仍应显示其内容。现在,在我选择在任何面板上切换选项卡后,只有一个选项卡处于活动状态。

我确实开始使用Bootstrap,但决定将其从项目中删除。然后,我编写了新的SCS,修改了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>

2 回复 | 直到 8 年前

madalinivascu 8 年前

在一个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

Colin Cline 8 年前

您正在尝试删除 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');
    });
});