Add a css class to an element after clicking on it

I'm trying add a css class to an element after clicking on it. But I couldn't do it. My target of this action is that, in my first level of menu when I click to an element, it be show with another color.

For example visit this link.

http://www.templatemonster.com/demo/50935.html

May this problem occurred because of refreshing the page after clicking! I'm not sure.

How can I do it?

(I've used ASP.NET and Umbraco CMS)

 <script type="text/javascript">
jQuery(function (evt) {
    $("[class*='firstLevelOfMenu'] ").click(function (event) {
        event.stopPropagation(); // stops click event from bubbling up from child
        $(this).addClass('current-menu-item page_item page-item-203 current_page_item');
    });
})

</script>

MyHelpers.cshtml:

@helper Navigation(int parentId, int depthNavigation = 3)
{
IPublishedContent parent = Node.ContentCache.GetById(parentId);
if (parent.Level <= (depthNavigation - 1) &&        parent.GetPropertyValue("UmbracoNaviHide").Equals(false) &&    parent.Children().Count() > 0)
{
if (parent.Level > 1)
{
        <ul style="visibility: hidden; display: none;" class="sub-menu">
            @foreach (IPublishedContent child in parent.Children())
            {
                if (child.Level <= depthNavigation &&    child.GetPropertyValue("UmbracoNaviHide").Equals(false))
                {
                    <li class="menu-item menu-item-type-post_type menu-item-   object-page">
                        <a href="@child.Url">@child.Name</a>
                        @Navigation(child.Id, depthNavigation)
                    </li>
                }
            }
        </ul>
    }
    else
    {
        foreach (IPublishedContent child in parent.Children())
        {
            if (child.Level <= depthNavigation && child.GetPropertyValue("UmbracoNaviHide").Equals(false))
            {
                <li id="menu-item-@child.Id" class="firstLevelOfMenu 
                    menu-item
                     menu-item-type-post_type
                     menu-item-object-page">

                    <a href="@child.Url">@child.Name</a>
                    @Navigation(child.Id, depthNavigation)
                </li>
            }
        }
    }
}
else
{
    foreach (IPublishedContent child in parent.Children())
    {
        if (child.Level <= depthNavigation && child.GetPropertyValue("UmbracoNaviHide").Equals(false))
        {
            <li>
                <a href="@child.Url">@child.Name</a>
                @Navigation(child.Id, depthNavigation)
            </li>
    }
}
}
}

Solution

DOM changes are not persistent. Happens exactly what you say: this problem occurred because of refreshing the page after clicking.

To have this behaviour you have to make the changes on page load instead of making the changes on clicking a link, because those changes will be lost when a new page is loaded.

You have to read the URL, "discover" what link has to be changed and do the proper actions.

For example, lets say you have 3 links on http://exampledomain.com, pointing each one this way:

Link 1: http://exampledomain.com/about-us
Link 2: http://exampledomain.com/buy-something
Link 3: http://exampledomain.com/find-my/dog

Then, you should have this script:

$( document ).ready(function() {
    /* This will get the path part of the
     * URL (The string after the domain) and
     * split it into an array .*/
    var path = window.location.pathname.split("/");

    /* The we will remove the starting / if there's any */
    if (path.length > 1) {
        path.splice(0, 1);
    }

    /* We check if there's actually a path */
    if (path.length > 0) {
        return;
    }

    /* And then, we check for the different links */
    switch(path[0]) {
        case "about-us":
            $("#link1").addClass('yeah');
            break;
        case "buy-something":
            $("#link2").addClass('yeah');
            break;
        case "find-my":
            $("#link3").addClass('yeah');
            break;
    }
});