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>

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>

• javascript
• jquery
• html
• twitter-bootstrap-3

• can u create fiddle link? – Arun Commented Oct 5, 2015 at 10:30
• jsfiddle/DTcHh/12790 – user2821023 Commented Oct 5, 2015 at 10:46
• could be simplified to $(".nav li").click(function() { //add class to link and $(this).removeClass('active')}); – Johan Commented Oct 5, 2015 at 10:58

4 Answers 4

try this

<script>
  $(function(){

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

SEE DEMO

Try This

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

You can achieve it in CSS like,

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

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');
 });