jquery li onclick 添加类

Question

我的母版页中有一个菜单。

 <ul>
    <li><a href="."><span>Home</span></a></li>
    <li><a href="contactus.aspx"><span>contact us</span></a></li>
 </ul>

当我点击菜单项时，我想使用jquery设置css类

 $(function () {

            $("li:first-child").addClass("test");
            $('li').click(function () {
                $(this).addClass('test');

            });
        });

CSS

 .test {background-color:Red;}

单击菜单时，它显示背景颜色，但随后消失。在单击其他菜单之前，如何让它保持事件状态？

谢谢

Answer 1

更新 2:这不是 javascript 问题

<li><a href="#"><span <%=ServerSizeLogic.SelectedMenu("Home")%>>Home</span></a></li>

根据您的服务器端技术，这是对服务器端可能如何处理的令人讨厌的猜测。 ServerSizeLogic.SelectedMenu("Home") 或您使用的任何内容都会返回空字符串或“class='test'”。只需确保只有一个 li 元素获得样式并删除客户端代码

// don't do it like this but hopefully you get the gist
ServerSizeLogic::SelectedMenu(string item){
    if (item == CurrentPage)
      return "class='test'";
    return "";
}

更新:很明显，一旦您离开页面，您想要选择的元素将必须来自服务器(除非您使用的是 ajax)，其中转换只是摆脱 li:first- child 并直接在当前 li 元素的 View 代码中设置类

原文: 这个 fiddle 怎么样http://jsfiddle.net/LmUrP/

 $(function () {

        $("li:first-child").addClass("test");
        $('li').click(function () {
            $('#menu li').removeClass('test');
            $(this).addClass('test');
        });
    });​

html

<ul id='menu'>
  <li><a href="#"><span>Home</span></a></li>
  <li><a href="#"><span>contact us</span></a></li>
  <li><a href="#"><span>apples</span></a></li>
  <li><a href="#"><span>bananas</span></a></li>
</ul>​