CODEWITHSUNDEEP
javascriptjqueryhtmltwitter-bootstrap-3
user2821023
user2821023

Reputation: 511

Remove active class from bootstrap navbar links

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>

Upvotes: 0

Views: 10226

Answers (4)

Rohit Kumar
Rohit Kumar

Reputation: 1958

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

Upvotes: 0

user4284772
user4284772

Reputation:

try this

<script>
  $(function(){

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

SEE DEMO

Upvotes: 5

Arun
Arun

Reputation: 1185

You can achieve it in CSS like,

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

Upvotes: 0

Lalji Tadhani
Lalji Tadhani

Reputation: 14149

Try This

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

Upvotes: 0

Related Questions