从引导导航条链接中移除活动类

Remove active class from bootstrap navbar links

本文关键字：活动 链接 导航      更新时间：2023-09-26

我在引导中编码导航条，我在导航条的右侧添加了社交媒体链接，如果链接被点击，它们将在新窗中打开。我想让社交媒体链接不会在点击时获得活动类。

<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>

try this

<script>
  $(function(){
    $('.navbar-right li').click(function(){ 
      $(this).addClass('active').siblings().removeClass('active');
    }); 
  })
</script>
<<p> 看到演示/strong>

Try This

<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');
 });
相关文章：