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;

}