Remove active class from bootstrap navbar links

Question

I'm coding navbar in bootstrap and I've social media links added on the right side of the navbar, if links are clicked they are opened in a new window. I want to make so social media links would not get active class on a click.

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

This is what I tried, but it doesn't work and I don't know why? link1, would be default active link for that page.

<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

try this

<script>
  $(function(){

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

SEE DEMO

Answer 2

Try This

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

Answer 3

You can achieve it in CSS like,

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

Answer 4

Try this-

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