how change active class on a listItem using jquery


Tags: c#,jquery,asp.net,selecteditem,css

Problem :

please see the demo below :
http://www.templateaccess.com/demos/walkin/
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">
    <ul>
      <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>
    </ul>
  </div>

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 li.active a, .menu_nav ul li a:hover { color:#fff; background:url(images/menu_a_l.png) no-repeat left top;}
.menu_nav ul li.active 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 asp.net 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'); });
    }); 
</script>

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 nested divs appear as siblings with CSS?

    How can I style a JavaFX menu and its items in CSS?

    How to implement css classes in form using laravel collective 5.2 . *

    How does a browser determine which cursor to use if multiple are set via CSS?

    Showing the percentage of poll's progress bar outside progress bar

    CSS - Absolute position , how to ignore left and top of parent

    How can I include an element within a div without using html?

    How to control the size of a table cell in css

    How to use an image as a frame, and scroll inside? Simulating a phone on a website

    How to change css content hover effect background color css php in this situation?

    How to properly float two columns side by side with css

    CSS: how to have reposition relative to a centered background image

    How can I fit images in full height columns in Bootstrap?

    HTML/CSS/JAVASCRIPT : How to move an element and not show scrollbars

    How to move items left and right in an html table using css? -

    How to set a child's element 50px narrower to its parent element in css? [closed]

    How to slide down to show content of DIV using CSS/jQuery?

    div not showing above text box

    Border-bottom showing on top

    How to center css menu and get rid of left margin space in ie?

    How to I create two containers with different backgrounds? [duplicate]

    How to apply remaining width to a div in the middle of 2 other divs

    css responsive background image not showing

    How do I get the height to the full page height?

    css ul and li - multiple spans in each li and how to line up the spans vertically

    How to align text vertically

    How to float: top?

    Firefox File Upload Box is bigger than Chrome/IE/Safari - How to fix? - use size(HTML) and width(CSS) parameters

    How do I horizontally extend the clickable area of an inline span?

    How to use a Drive hosted css to customize the receiver?