[英]Remove active class from bootstrap navbar links
我在引导程序中对导航栏进行编码,并且在导航栏的右侧添加了社交媒体链接,如果单击链接,则会在新窗口中打开它们。 我想这样做,以便社交媒体链接在单击时不会活跃。
<ul class="nav navbar-nav navbar-right">
<li id="facebook">
<a href="#" target="_blank"><i class="fa fa-lg fa-facebook"></i></a>
</li>
<li id="twitter">
<a href="#" target="_blank"><i class="fa fa-lg fa-twitter"></i></a>
</li>
<li id "google-plus">
<a href="#" target="_blank"><i class="fa fa-lg fa-google-plus"></i></a>
</li>
</ul>
这是我尝试过的方法,但是它不起作用,我也不知道为什么? link1,将是该页面的默认活动链接。
<script>
$(".nav li").click(function() {
$(".nav li#link1").addClass('active');
$(".nav li#facebook").removeClass('active');
$(".nav li#twitter").removeClass('active');
$(".nav li#google-plus").removeClass('active');
});
</script>
尝试这个
<script>
$(function(){
$('.navbar-right li').click(function(){
$(this).addClass('active').siblings().removeClass('active');
});
})
</script>
尝试这个
<script>
$(".nav li").click(function() {
$(".nav li").removeClass('active');
$(this).addClass('active');
});
</script>
您可以在CSS中实现它,例如,
#navbar ul li#facebook a:hover,#navbar ul li#facebook a:active {
color: #3b5998 !important;
}
尝试这个-
$(".nav li").click(function() {
$(".nav li a:active").css('display',null);// discard inline style
$(".nav li a:active").removeClass('active');//remove pseudo class
$(".nav li#link1").addClass('active');
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.