how change active class on a listItem using jquery

Tags: c#,jquery,,selecteditem,css

Problem :

please see the demo below :
i bought this template and really really could n't find a way how does active class on menu_nav li work?
that menu_nav html is like this :

  <div class="menu_nav">
      <li class="active"><a href="index-2.html"><span>Home</span></a></li>
      <li><a href="blog.html"><span>Blog</span></a></li>
      <li><a href="support.html"><span>Support</span></a></li>
      <li><a href="about.html"><span>About Us</span></a></li>
      <li><a href="contact.html"><span>Contact Us</span></a></li>

and it's css :

/* menu */
.menu_nav { margin:0; padding:50px 0 0; float:right; width:auto; height:43px;}
.menu_nav ul { list-style:none; padding:0; height:43px;}
.menu_nav ul li { margin:0; padding:0 0 0 2px; float:left;}
.menu_nav ul li a { display:block; margin:0; padding:0 0 0 20px; font-size:16px; line-height:19px; font-weight:normal; color:#fff; text-decoration:none; text-transform:none; text-align:center;}
.menu_nav ul li a span { display:block; padding:12px 20px 12px 0; height:19px;}
.menu_nav ul a, .menu_nav ul li a:hover { color:#fff; background:url(images/menu_a_l.png) no-repeat left top;}
.menu_nav ul a span, .menu_nav ul li a:hover span { background:url(images/menu_a_r.png) no-repeat right top;}

as you see there is a class named 'active' that moves by clicking on every menu and never jumps to home menu during postbacks.
there is no jquery or javascript about that.
how does it work?
in my that active class does not work, so i add the jquery below :

<script type="text/javascript">
    $(function () {
        $('.menu_nav ul li').click(function () { $(this).addClass('active'); alert('a'); });

but during postbacks i lose active class on selected item.
any idea?

Solution :

You are adding the '.active' class on the client-side, so as soon as your page does a full postback everything is being re-created on the server-side. If you want to prevent that from happening, use an UpdatePanel and only refresh the page content (leaving the navigation menu intact).

    CSS Howto..

    How to make this HTML change work? [closed]

    How to remove dropdown active color in bootstrap 3.0?

    How to make a responsive mosaic css fullscreen width

    How to embed SVG styling with javascript?

    How to animate CSS Translate

    How to change CSS pseudo-class element using JavaScript

    How do I make custom scrollbars with jScrollPane to be always visible?

    How to get list of custom CSS properties

    html element h1 with links as background image show them in one line

    CSS: How to build a vertical separator with margin on its top and bottom? [closed]

    HTML/CSS/JS - How to change and image and text on click

    CSS Horizontal Menu has wrong x-position, how to put directly under parent menu?

    How can I bold specific HTML rows and columns with CSS or HTML?

    How to do margin: 0 auto 0 auto minus a few pixels with CSS?

    How to make div inside table same size as text inside a?

    How can I delete these arrows?

    How to reload CSS after ajax call

    How do I get nested divs to be same height and expand to the largest of the heights?

    How can I make this jQuery effect responsive?

    How can I apply percentage-based positioning to background-image sprites with pure CSS?

    How to hide or show correctly page element (with media query of pure css)?

    How to extend background CSS styling indefinitely along the x-axis?

    How to implement CSS file style on selected div

    How do i prevent my CSS affecting external plugins?

    How do I edit the CSS of the Html.DisplayFor method in MVC 3?

    CSS / bxSlider: How to avoid that Images are overlapping parent div

    Why the space after the table, and how to remove it?

    How to make a simple plus one voting system in code igniter

    How to override default tag css to normal?

    How to make a barlike chart but only with html and css [closed]