jQuery: add class and remove class to the list item. Change color of selected navigation menu

Scenario:
I have a navigation menu like this. Note: Link <a> is child of list item <li>. I wanted to change the background of the selected list item and remove the background color of unselected list item.

index.html
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript" src="scripts/javascript.js"></script>
    <script>
        $(document).ready(function () {
            //            $("nav ul li a").click(function () {
            //                alert("internal click");
            //            });
            changeMenuColor();
        });
    </script>

<nav>

        <ul>

            <li><a href="#">Intro</a></li>

            <li><a href="#">Size</a></li>

            <li><a href="#">Play</a></li>

            <li><a href="#">Food</a></li>

        </ul>

        <div class="clear"></div>

       </nav>

I tried to add a class .active into the list item using jQuery but it was not working

style.css

.active

{

    background-color: #480048;

}

javascript.js
///<reference path="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"/>
function changeMenuColor()
{
    $("nav li a").click(function () {
        $(this).parent().addClass("active");
        $(this).parent().siblings().removeClass("active");
    });
}

Solution:

Basically, using .active class changing the background-color of list item does not work. So I changed the css class name from .active to "nav li.active a" so  using the same javascript it will add the .active class into the selected list item. Now if the list item <li> has .active class then css will change the background color of the child of that list item <a>.

nav li.active a

{

    background-color: #480048;

}

jQuery: Remove class from siblings

The issue is that siblings works for elements under the same parent. Your a links are not under the same parent since each one is wrapped in a h3.

So I believe this is what you want

$(document).ready(function(){

    $(".accordion h3:first").addClass("active");
    $(".accordion a:first").addClass("active");
    $(".accordion p:not(:first)").hide();

    $(".accordion h3").click(function() {
        $(this)
            .addClass('active') //set the current as active
            .siblings("h3") //find sibling h3 elements
            .removeClass("active") // and remove the active from them
            .end() // return selection to the current element
            .next("p") // find the next p
            .slideDown("slow") // and show it
            .siblings("p:visible") // find the other visible p elements
            .slideUp("slow"); // and hide them

        $(this)
            .find('a') // find a under current element
            .addClass('active') // and add active class
            .end() // return to current element
            .siblings('h3') // find sibling h3 elements
            .find('a') // find their a elements
            .removeClass('active'); // and remove the active
    });

});