Html 单击每个选项卡时是否可以刷新引导选项卡内容?
我有如下引导选项卡 HTML标记:Html 单击每个选项卡时是否可以刷新引导选项卡内容?,html,jquery,twitter-bootstrap,Html,Jquery,Twitter Bootstrap,我有如下引导选项卡 HTML标记: <ul class="nav nav-tabs"> <li class="active"><a data-toggle="tab" href="#home">Home</a></li> <li><a data-toggle="tab" href="#menu1&quo
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home">Home</a></li>
<li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
<li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade">
<h3>Menu 1</h3>
<button type="button" class="btn" id="active-all">All</button>
<button type="button" class="btn active">A</button>
<button type="button" class="btn">B</button>
<button type="button" class="btn">C</button>
<button type="button" class="btn">D</button>
</div>
<div id="menu1" class="tab-pane fade">
<h3>Menu 1</h3>
<button type="button" class="btn" id="active-all">All</button>
<button type="button" class="btn active">A</button>
<button type="button" class="btn">B</button>
<button type="button" class="btn">C</button>
<button type="button" class="btn">D</button>
</div>
<div id="menu2" class="tab-pane fade">
<h3>Menu 2</h3>
<button type="button" class="btn" id="active-all">All</button>
<button type="button" class="btn active">A</button>
<button type="button" class="btn">B</button>
<button type="button" class="btn">C</button>
<button type="button" class="btn">D</button>
</div>
</div>
基本上,我切换类bg颜色按钮。这些按钮放在我的每个选项卡上。当我点击按钮时,bg颜色类应用于按钮。当我返回到上一个选项卡或下一个选项卡时,style on按钮仍在那里。似乎选项卡没有刷新。那么,有没有什么方法可以让我每次单击tab时都刷新选项卡内容。如果我理解正确,您需要在访问任何选项卡时删除带有颜色的类。为此,请添加这部分代码:
$('.nav.nav-tabs a').click(function(){
$('.btn').removeClass('bg-color');
});
完整代码:
$(document).ready(function(){
$('.btn').click(function(){
$(this).toggleClass('bg-color');
});
$('.nav.nav-tabs a').click(function(){
$('.btn').removeClass('bg-color');
});
});
你说的刷新是什么意思?请注意,tab只需在此处显示和隐藏内容(所有dom都已装入,只需在Visibility上播放)谢谢您的回复,这正是我要查找的内容。@Rahwee,没问题。
$(document).ready(function(){
$('.btn').click(function(){
$(this).toggleClass('bg-color');
});
$('.nav.nav-tabs a').click(function(){
$('.btn').removeClass('bg-color');
});
});