從引導導航欄中刪除活動類

Question

我在引導程序中對導航欄進行編碼，並且在導航欄的右側添加了社交媒體鏈接，如果單擊鏈接，則會在新窗口中打開它們。 我想這樣做，以便社交媒體鏈接在單擊時不會活躍。

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

Answer 1

嘗試這個

<script>
  $(function(){

    $('.navbar-right li').click(function(){ 
      $(this).addClass('active').siblings().removeClass('active');
    }); 
  })
</script>

查看演示

Answer 2

嘗試這個

<script>
    $(".nav li").click(function() {
       $(".nav li").removeClass('active');
       $(this).addClass('active');
    });
</script>

Answer 3

您可以在CSS中實現它，例如，

#navbar ul li#facebook a:hover,#navbar ul li#facebook a:active {
    color: #3b5998 !important;
}

Answer 4

嘗試這個-

$(".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');
 });