[英]Bootstrap Accordion - Active Button
I have a Bootstrap accordion with an horizontal menu. 我有一台带有水平菜单的Bootstrap手风琴。 I'm trying to change the background of the active button.
我正在尝试更改活动按钮的背景。
I have played a lot in JDFIDDLE without any result. 我在JDFIDDLE中玩了很多,没有任何结果。
In order not to got crazy and avoid a larger mess, I did stop to claim for help. 为了不发疯并避免造成更大的混乱,我没有停下来寻求帮助。
Please check the JSFIDDLE 请检查JSFIDDLE
JS: JS:
$("#nav2 a").on("click", function(){
$("#nav2").find(".active").removeClass("active");
$(this).parent().addClass("active");
});
CSS: CSS:
#nav2 a:active,
#nav2 a:hover,
#nav2 a:focus {
color: #fff;
background-color: #000 !important;
font-weight: bold;
}
It seems to me that tabs are more suited for what you're trying to do than accordion. 在我看来, 标签比手风琴更适合您要尝试的操作。
HTML: HTML:
<div>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
<li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
<li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
<li 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">Raw denim you probably haven't heard of them jean shorts Austin.</div>
<div role="tabpanel" class="tab-pane" id="profile">Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid.</div>
<div role="tabpanel" class="tab-pane" id="messages">Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade.</div>
<div role="tabpanel" class="tab-pane" id="settings">Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater.</div>
</div>
</div>
Fiddle: http://jsfiddle.net/j0cp4hkp/ 小提琴: http : //jsfiddle.net/j0cp4hkp/
Try this: 尝试这个:
JQUERY JQUERY
$("#headingOne a").on("click", function(){
$(this).addClass("active");
$("#headingOne").find('.active').not(this).removeClass("active");
});
I added this CSS: .active { color:#ccc !important;}
so that you can see which menu item is active. 我添加了以下CSS:
.active { color:#ccc !important;}
以便您可以看到哪个菜单项处于活动状态。
http://jsfiddle.net/ggChris/sqp2jkvz/ http://jsfiddle.net/ggChris/sqp2jkvz/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.