如何添加活动类到引导标签
问题描述:
我有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>
你能不能帮我写正确的功能?
答
这里我们要添加活动类到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>
它的工作原理,但林使用的自举4.0,当我变成你的链接代码被破坏:d任何方式来写这个JS? – Damian