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 can I use javascript, html and css to make an image a button, which can do the following?

    How to make video thumbnails like Facebook [CSS]

    How to implement two sets of CSS Tabs on one page?

    How to make css menu width impossible to change when zooming or changing resolution?

    How to create a pulsing glow ring animation in CSS?

    How to animate 2 css layouts from left to right or from right to left with jquery?

    How to make a div expand to right side of page and bottom of page [closed]

    How to avoid with css when background of the second line covers the letters of the first line?

    How to highlight a whole cell when hovering over link

    How to put a background video loop on a website HTML/CSS

    How can one create horizontal tree view using CSS and HTML?

    How to control child div height of a flex item

    How can I align a button at the bottom of a div?

    Three column responsive equal height, with border. How to make it in CSS?

    How to set jQuery draggable min/max-left and min/max-right

    How to make IE respect max AND min-width [duplicate]

    How do I iterate through array and set classes individually?

    How does Mozilla create this animated effect?

    How to format the text below using css

    How to position two elements side by side using CSS

    How to write print css to get print from web pages in almost same manner as we get from MS word?

    How to write function in css

    How to disable .less (dotLess CSS) syntax analysis in ReSharper 6?

    How to match an element's background colour with 2 semi-transparent element background colours

    How to load different CSS based on the category of the post on WP

    How to stop CSS element style from getting into my class style?

    How to expire cached pages when only the CSS url changes

    How to set two values for one css property?

    How to build HTML email using CSS?

    How to set HTML table cell to inherit its size?