how to change the navigation item color when it will active?

Question

My css style I have

#nav {
    position: relative;

}

and html code is

<div class="header-background">
        <!-- <div> -->
         <div id="logo">Site Title</div>

         <div id="nav">
               <nav id="desktop-nav">
            <a class="nav-item" href="#1">about</a>
            <a class="nav-item" href="#2">news</a>
            <a class="nav-item" href="#3">Community</a>
            <a class="nav-item" href="#4">Docs</a>
           </nav>

    </div>

here I have about,news,community,docs these 4 field..I want when I click any button suppose "about" that time "about" button color change to yellow and other buttons text color will white ... So,I am using the jquery

 $(".desktop-nav a").live("click",function(){
    $(".desktop-nav a").removeClass("active");
        $(this).addClass("active");
    });

but the color is not changing..guys suggest me something..

Answer 1

As of jQuery 1.7, the .live() method is deprecated. Use .on() to attach event handlers.

According to your HTML code, nav tag has id not class.

here is the working code:

$("#desktop-nav a").on("click", function(){
    $("#desktop-nav a").removeClass("active");
        $(this).addClass("active");
});

Answer 2

Just do as nevermind suggested: Use the correct selector.

Also, you could use the .siblings() function of jQuery to make your code more generic.

$("#desktop-nav").on("click", 'a', function(){
    $(this).addClass("active").siblings().removeClass("active");
});

Answer 3

Your jQuery code doesn't work because it does not bode well with your html. You seem to have got your jQuery selector wrong.

So, I'd suggest a couple of changes :

First change: the nav element has an id of desktop-nav . Your jQuery code method is looking for a class named desktop-nav . This maybe a typo.

Second change : as stated before live method is deprecated. You can either use on() or click() method. I have used click() method in my example.

If you make the first change, you code should work ie replacing .desktop-nav with #desktop-nav in jQuery.

The second change will ensure compliance with best proactices.

See the code working below :

 $("#desktop-nav a").click(function(){ $("#desktop-nav a").removeClass("active"); $(this).addClass("active"); }); 

 #nav { position: relative; display: block; height: 55px; line-height: 55px; width: 100%; max-width: none; margin: 0; background: #333; z-index: 1; border-bottom: 1px solid #666; font-weight: 600; font-family: helvetica, arial, sans-serif; font-size: 14px; -webkit-box-align:center; -webkit-box-pack:center; display:-webkit-box; } #nav, #nav * { -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ -moz-box-sizing: border-box; /* Firefox, other Gecko */ box-sizing: border-box; /* Opera/IE 8+ */ } .nav-item { color: #fff; text-transform: uppercase; text-decoration: none; } a.active { color: #82b965; } /* Desktop */ #desktop-nav .nav-item { display: block; padding: 0 20px; float: right; -webkit-transition: color 200ms linear; -moz-transition: color 200ms linear; -ms-transition: color 200ms linear; -o-transition: color 200ms linear; transition: color 200ms linear; } #desktop-nav .nav-item:hover, #desktop-nav .nav-item:active { opacity: 0.7; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div class="header-background"> <!-- <div> --> <div id="logo">Site Title</div> <div id="nav"> <nav id="desktop-nav"> <a class="nav-item" href="#1">about</a> <a class="nav-item" href="#2">news</a> <a class="nav-item" href="#3">Community</a> <a class="nav-item" href="#4">Docs</a> </nav> </div>