时间戳

首页 > 解决方案 > 使用 Bootstrap 停用导航选项卡

jquery - 使用 Bootstrap 停用导航选项卡

问题描述

我有 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/

有任何想法吗？

标签： jquerytwitter-bootstrapbootstrap-4

解决方案

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

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

放在bootstrap的include之后

推荐阅读