Question

带有活动类按钮的 bootstrap 4 选项卡不起作用

2019-05-31

5538

button bootstrap-4 tabs

我对我的 bootstrap 4 个选项卡有一个小问题：

我的目的是像这个例子一样在按钮之间切换： https://codepen.io/anon/pen/vwQamK 但使用 bootstrap。

  <div id="tab" class="btn-group btn-group-justified" data-toggle="buttons">
    <a href="#prices" class="btn btn-primary active" data-toggle="tab">
      <input type="radio" />Prices
    </a>
    <a href="#features" class="btn btn-default" data-toggle="tab">
      <input type="radio" />Features
    </a>
  </div>

  <div class="tab-content">
    <div class="tab-pane active" id="prices">Prices content</div>
    <div class="tab-pane" id="features">Features Content</div>
  </div>

目前，选项卡内容之间的切换不起作用！

这是我的代码笔：

https://codepen.io/user1010/pen/mYQvVo

Answer 1

使用 .nav-pills

您可以使用 .nav-pills ： https://getbootstrap.com/docs/4.3/components/navs/#pills

<div class="container">
    <div class="nav nav-pills">
        <a href="#prices" class="nav-link active" data-toggle="pill">
            Prices
        </a>
        <a href="#features" class="nav-link" data-toggle="pill">
            Features
        </a>
    </div>
    <div class="tab-content">
        <div class="tab-pane active" id="prices">Prices content</div>
        <div class="tab-pane" id="features">Features Content</div>
    </div> 
</div>

演示： https://jsfiddle.net/davidliang2008/dxzaufho/12/

使用btn-group和自定义样式

<div class="container">
    <div class="nav btn-group">
        <a href="#prices" class="btn active" data-toggle="tab">
            Prices
        </a>
        <a href="#features" class="btn" data-toggle="tab">
            Features
        </a>
    </div>
    <div class="tab-content">
        <div class="tab-pane active" id="prices">Prices content</div>
        <div class="tab-pane" id="features">Features Content</div>
    </div> 
</div>

.btn-group.nav {
    display: inline-flex;
}

.btn-group .btn.active {
    background-color: var(--primary);
    color: #fff;
}

演示： https://jsfiddle.net/davidliang2008/dxzaufho/19/

关于您的选项卡无法正常工作的问题，我在 Github 中打开了一个问题。目前看来您需要将 .nav 或 .list-group 作为选项卡的父类，否则选项卡将无法正常工作。

Answer 2

看起来您无需输入，只需使用文本即可在内容之间切换。

  <div id="tab" class="btn-group btn-group-justified" data-toggle="buttons">
    <a href="#prices" class="btn btn-primary active" data-toggle="tab">
      Prices
    </a>
    <a href="#features" class="btn btn-default" data-toggle="tab">
      Features
    </a>
  </div>

  <div class="tab-content">
    <div class="tab-pane active" id="prices">Prices content</div>
    <div class="tab-pane" id="features">Features Content</div>
  </div>

Answer 3

Bootstrap 4.3.1 将选项卡用作单选按钮 - jsfiddle

$(document).ready(function () {
  $('input[name="intervaltype"]').click(function () {
      $(this).tab('show');
      $(this).removeClass('active');
  });
})

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> 


<div class="nav nav-tabs" role="tablist">
<div>
    <input id="optDaily" checked name="intervaltype" type="radio" data-target="#scheduleDaily">
    <label for="optDaily">Daily</label>
</div>
<div>
    <input id="optWeekly" name="intervaltype" type="radio" data-target="#scheduleWeekly">
    <label for="optWeekly">Weekly</label>
</div>
<div>
    <input id="optMonthly" name="intervaltype" type="radio" data-target="#scheduleMonthly">
    <label for="optMonthly">Monthly</label>
</div>
</div>
<div class="tab-content">
    <div id="scheduleDaily" class="tab-pane active">Daily</div>
    <div id="scheduleWeekly" class="tab-pane">Weekly</div>
    <div id="scheduleMonthly" class="tab-pane">Montly</div>
</div>