如何将活动类添加到引导选项卡答案

【问题标题】：How to add class active to bootstrap tabs如何将活动类添加到引导选项卡
【发布时间】：2017-10-12 12:05:41
【问题描述】：

我对 bootstarap 药片有疑问。我想在函数中将活动类添加到导航，但没有得到它。

功能代码如下：

var tabsFn = (function() {

  function init() {
    setHeight();
  }

  function setHeight() {
    var $tabPane = $('.tab-pane'),
        tabsHeight = $('.nav-tabs').height();

    $tabPane.css({
      height: tabsHeight
    });
  }

  $(init);
})();

还有HTML代码：

<div class="container"> 
        <div class="row ">
            <div class="col-md-12">
                <div class="tabs-left">
                    <ul class="nav nav-tabs col-md-4">
                      <li><a href="#a" data-toggle="tab"><span>First</span></a></li>
                      <li><a href="#b" data-toggle="tab"><span>Second</span></a></li>
                    </ul>
                    <div class="tab-content col-md-8">
                        <div class="tab-pane active" id="a">
                            <div class="col-md-12">first</div>  
                        </div>
                        <div class="tab-pane" id="b">
                            <div class="col-md-12">second</div>
                         </div>
                    </div>
                </div>
            </div>
        </div>
</div>

你能帮我写出正确的函数吗？

【问题讨论】：

标签： twitter-bootstrap tabs nav

【解决方案1】：

这里我们必须将活动类添加到 li 标签。我在下面添加了jsfiddle。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container"> 
        <div class="row ">
            <div class="col-md-12">
                <div class="tabs-left">
                    <ul class="nav nav-tabs col-md-4">
                      <li><a href="#a" data-toggle="tab"><span>First</span></a></li>
                      <li><a href="#b" data-toggle="tab"><span>Second</span></a></li>
                    </ul>
                    <div class="tab-content col-md-8">
                        <div class="tab-pane active" id="a">
                            <div class="col-md-12">first</div>  
                        </div>
                        <div class="tab-pane" id="b">
                            <div class="col-md-12">second</div>
                         </div>
                    </div>
                </div>
            </div>
        </div>
</div>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container"> 
        <div class="row ">
            <div class="col-md-12">
                <div class="tabs-left">
                    <ul class="nav nav-tabs col-md-4">
                      <li class="active"><a href="#a" data-toggle="tab"><span>First</span></a></li>
                      <li><a href="#b" data-toggle="tab"><span>Second</span></a></li>
                    </ul>
                    <div class="tab-content col-md-8">
                        <div class="tab-pane active" id="a">
                            <div class="col-md-12">first</div>  
                        </div>
                        <div class="tab-pane" id="b">
                            <div class="col-md-12">second</div>
                         </div>
                    </div>
                </div>
            </div>
        </div>
</div>

【讨论】：

它可以工作，但我使用的是 boostrap 4.0，当我更改你的链接时，代码被破坏了：D 有什么方法可以为此编写 js 吗？