Question

我有3个选项卡以及使用Bootstrap设计的相应窗格。

<ul class="nav nav-pills" id="pills-tab" role="tablist">
  <li class="nav-item">
    <a class="nav-link" id="tab-A" data-toggle="pill" href="#A" role="tab">tab A</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="tab-B" data-toggle="pill" href="#B" role="tab">tab B</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="tab-C" data-toggle="pill" href="#C" role="tab">tab C</a>
  </li>
</ul>
<div class="tab-content" id="pills-tabContent">
  <div class="tab-pane fade border rounded p-3" id="A" role="tabpanel" style="background-color: #CCE5FF;border-radius:25px;">
  pane A
  </div>
  <div class="tab-pane fade border rounded p-3" id="B" role="tabpanel" style="background-color: #CCE5FF;border-radius:25px;">
  pane B
  </div>
  <div class="tab-pane fade border rounded p-3" id="C" role="tabpanel" style="background-color: #CCE5FF;border-radius:25px;">
  pane C
  </div>
</div>

单击时，每个选项卡按钮都会被激活，而上一个按钮将被禁用。但是无法禁用所有按钮。或者至少我还没有找到它。

因此，我想实现对选项卡按钮的切换行为，以便在单击时禁用活动的选项卡按钮，并隐藏相应的窗格。

我已经尝试过了：

$('.nav-link').on('click', function (e) {
  var pill = $(this);
  if (pill.hasClass('active')) {
    e.preventDefault();
    pill.removeClass('active');
    var id = $(this).attr("href");
    var tab = $(id);
    tab.removeClass('active').removeClass('show');
  }
});

...但是无法实现预期的行为...

这是完整的示例代码https://jsfiddle.net/09Lk2zcp/

有什么想法吗？

Answer 1

最简单的方法是覆盖引导程序样式：

.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
  color: #000;
  background-color: #ff0000;
}

将其放入引导程序之后

使用Bootstrap停用导航选项卡

1 个答案: