Bootstrap导航选项卡:活动类不起作用 [英] Bootstrap nav tabs: active class doesnt work
本文介绍了Bootstrap导航选项卡:活动类不起作用的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
这是HTML代码:
<div class="process">
<h2 style="text-transform: uppercase;">The Application Process</h2>
<br><br>
<div class="row">
<div class="col-md-3" align="left">
<ul class="nav nav-pills flex-column" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#home" role="tab" aria-controls="home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#profile" role="tab" aria-controls="profile">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#messages" role="tab" aria-controls="messages">Messages</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#settings" role="tab" aria-controls="settings">Settings</a>
</li>
</ul>
</div>
<div class="col-md-9">
<div class="tab-content">
<div class="tab-pane active" id="home" role="tabpanel">a</div>
<div class="tab-pane" id="profile" role="tabpanel">b</div>
<div class="tab-pane" id="messages" role="tabpanel">c</div>
<div class="tab-pane" id="settings" role="tabpanel">d</div>
</div>
</div>
</div>
</div>
这是JS代码:
<script>
$(function () {
$('#myTab a:last').tab('show')
})
$('ul.nav-pills li a').click(function (e) {
$('ul.nav-pills li.active').removeClass('active')
$(this).parent('li').addClass('active')
})
</script>
具有活动类别的导航仪是家用导航仪,但是以某种方式设置是活动的.我尝试搜索了很多次,但是没有找到答案.
The nav that have the active class is the home nav, but somehow the settings is the one who is active. I tried to search many times, but doesn't find the answer.
是JavaScript还是容器类?因为我已经在div进程"之前使用了容器.谢谢.
Is it the javascript or the container class? Because I already use container before the div "process". Thanks.
推荐答案
如果添加了引导JS并摆脱了JS代码,它应该可以工作:
If you add the bootstrap JS and get rid of your JS code, it should work:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<div class="process">
<h2 style="text-transform: uppercase;">The Application Process</h2>
<br><br>
<div class="row">
<div class="col-md-3" align="left">
<ul class="nav nav-pills flex-column" id="myTab" role="tablist">
<li class="nav-item active">
<a class="nav-link" data-toggle="tab" href="#home" role="tab" aria-controls="home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#profile" role="tab" aria-controls="profile">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#messages" role="tab" aria-controls="messages">Messages</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#settings" role="tab" aria-controls="settings">Settings</a>
</li>
</ul>
</div>
<div class="col-md-9">
<div class="tab-content">
<div class="tab-pane active" id="home" role="tabpanel">a</div>
<div class="tab-pane" id="profile" role="tabpanel">b</div>
<div class="tab-pane" id="messages" role="tabpanel">c</div>
<div class="tab-pane" id="settings" role="tabpanel">d</div>
</div>
</div>
</div>
</div>
希望这会有所帮助. :)
Hope this helps. :)
这篇关于Bootstrap导航选项卡:活动类不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文