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

本文关键字：活动 listItem 何使用 jquery 更改 | 更新日期: 2023-09-27 18:21:55

请参阅下面的演示：
http://www.templateaccess.com/demos/walkin/
我买了这个模板，真的不知道menunavli上的活动类是怎么工作的
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>

但在回发期间，我失去了选定项目的活动类
知道吗？

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

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

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

你的菜单对我来说似乎很好，每个页面都有正确的菜单项样式。

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;
        }
    });
});
相关文章：