Question

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?

Answer 1

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).