[英]Bootstrap tabs. Add border to current tab through jquery
Here bootstrap tabs: 这里是引导选项卡:
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li style="padding: 20px" role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
<li style="padding: 20px" role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
<li style="padding: 20px" role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
<li style="padding: 20px" role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">
<h1>Hello World</h1>
</div>
<div role="tabpanel" class="tab-pane" id="profile">Hello</div>
<div role="tabpanel" class="tab-pane" id="messages">Some text</div>
<div role="tabpanel" class="tab-pane" id="settings">Second text</div>
</div>
</div>
</div>
and current tab has class active automatically with bootstrap javascript. 并且当前选项卡使用引导javascript自动激活了类。
So i want i add border to current tab through jquery: 所以我想通过jquery向当前选项卡添加边框:
$('li').click(function () {
if ($(this).hasClass('active')) {
$(this).addClass('border-add')
}
})
I can not do it. 我做不到。 Because this code works bad.
因为此代码效果不好。 If will click one of the tabs border will appear to the current tab.
如果单击将在选项卡边框之一出现在当前选项卡。 But if i will click to another tab the first i clicked tab border will not disappear.
但是,如果我单击另一个选项卡,则我单击的第一个选项卡边框不会消失。 Guys explain me how to realize it.
伙计们解释我如何实现它。 Thank you in advance!
先感谢您!
This can be done without JQuery using the class 无需使用类的JQuery即可完成此操作
li.active{
border: 1px solid black;
}
/* Latest compiled and minified CSS included as External Resource*/ /* Optional theme */ @import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css'); body { margin: 10px; } li.active{ border: 1px solid black; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <!-- Nav tabs --> <ul class="nav nav-tabs" role="tablist"> <li style="padding: 20px" role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li> <li style="padding: 20px" role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li> <li style="padding: 20px" role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li> <li style="padding: 20px" role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li> </ul> <!-- Tab panes --> <div class="tab-content"> <div role="tabpanel" class="tab-pane active" id="home"> <h1>Hello World</h1> </div> <div role="tabpanel" class="tab-pane" id="profile">Hello</div> <div role="tabpanel" class="tab-pane" id="messages">Some text</div> <div role="tabpanel" class="tab-pane" id="settings">Second text</div> </div> </div> </div>
You probably are just about there. 您可能就在那里。 Sounds like all you need to do is remove
border-add
before adding it: 听起来,您需要做的就是在添加
border-add
之前先删除它:
$('li').click(function () {
$('li.border-add').removeClass('border-add'); // remove from the one that has it first
if ($(this).hasClass('active')) {
$(this).addClass('border-add'); // then add the new one
}
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.