如何使用 jquery 更改 listItem 上的活动类

Question

请看下面的演示：
http://www.templateaccess.com/demos/walkin/
我买了这个模板，真的找不到方法 menu_nav li 上的活动课程是如何工作的？
那 menu_nav html 是这样的：

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

这是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;}

如您所见，有一个名为“active”的类，它通过单击每个菜单来移动，并且在回发期间从不跳转到主菜单。
没有关于那个的 jquery 或 javascript。
它是如何工作的？
在我的 asp.net 中，活动类不起作用，所以我在下面添加了 jquery：

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

但在回发期间，我失去了所选项目的活动课程。
有什么想法吗？

Answer 1

您将在client-side 上添加“.active”类，因此一旦您的页面完成完整的postback，所有内容都会在server-side 上重新创建。如果您想防止这种情况发生，请使用 UpdatePanel 并仅刷新页面内容（保持导航菜单不变）。

Answer 2

active 类是在每个页面上为菜单项手动设置的。所以你不需要 JavaScript 来设置它，除非你使用 AJAX 来获取新页面并显示它。

您的菜单对我来说似乎很好用，每一页的菜单项都正确设置了样式。

Answer 3

HTML：

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

jQuery:

$(function() {
    var location = window.location.href,
    nav = $('.menu_nav');
    $('li', nav).each(function() {
        var index = location.indexOf($(this).prop('class'));
        if (index != -1) {
            $(this).addClass('active');
            return false;
        }
    });
});