Question

I have a navigation menu within a .navContainer css div. Upon click, one of the li tags within the ul tag’s text changes colour. However I would like to know how, using jquery, I can keep the colour of the currently selected navigation item and change the colour of the currently hovering item #d49a9a until the user clicks and the colour on the currently selected navigation item changes to #c2c0c0.

Please can you tell me how to do this!

My code so far:

CSS:

.navContainer ul{
    left: 10px;
    top:  20px;
    position: absolute;
    color: #c2c0c0;
    font-family: 'Terminal Dosis';
    font-weight: 200;
    font-size: 20pt;
    list-style-type: none;
    line-height: 50px;
}
.navContainer {
    left: 150px;
    top: 150px;
    position: absolute;
}

HTML (within body tag)

<div class="navContainer">
                <ul>
                    <li style="color: #d49a9a">Work</li>
                    <li><a href="#">Blog</a></li>
                    <li>About</li>
                    <li>Contact</li>
                </ul>
            </div>
            <script type="text/javascript">
            $(".navContainer li").click( function() { 
                      $(".navContainer li, .navContainer li a").css("color", "#c2c0c0");
                      $(this).css("color", "#d49a9a");
                    });
            </script>
            <script type="text/javascript">

            </script>
        </body>

Answer 1

I think you are looking for this take a look

Working demo

You just have to add the below class and on li click just set the color of the li element you click thats it

.navContainer li:hover{ 
   color:#d49a9a
}

JS

$(".navContainer li").click( function() { 
    $(this).css("color", "#d49a9a");
});