Question

关于我的引导程序4个选项卡，我有一个小问题：

我的意图也是在按钮之间进行切换，例如：https://codepen.io/anon/pen/vwQamK，但带有引导程序。

  <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>

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

这是我的codepen：

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

Answer 1

您似乎只能使用文本来代替输入，而是在内容之间切换。

  <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 2

使用.nav-药丸

您可以使用.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中opened an issue。当前看来，您需要使用.nav或.list-group作为该标签的父类，否则该标签将无法正常工作。

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>

Answer 4

我有同样的问题。群组按钮在4.31上效果很好，但是在我对引导程序4.4或4.4.1进行升级后，刷新后它们全部激活，只有单击每个按钮后它们才能正常工作。

我建议您尝试将Bootstrap 4.3.1与@Yevgeniy Afanasyev的示例一起使用

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

4 个答案:

使用.nav-药丸

具有btn-group和自定义样式