Question

我的bootstarap药片有问题。我想在函数中添加class active to nav但是没有得到它。

这是功能代码：

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>

你能帮我写出正确的功能吗？

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

如何将类激活添加到引导选项卡

1 个答案: