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

UPDATE2：这不是一个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），其中cast只是摆脱li:first-child并设置该类直接在当前li元素

上的视图代码中

原件：这个小小提琴怎么样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>

Answer 2

这将使您能够根据当前页面网址突出显示“当前列表项目” 您必须在加载时测试网址：

$(function () {
    $('ul#menu>li>a[href="'+location.pathname+'"]').addClass('test');      
});

让你的html像这样：

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

注意href属性值开头的/！那是因为location.pathname总是返回绝对路径。

这是一个小提琴http://jsfiddle.net/unloco/29E23/
我写了href="/_display/"，因为这是jsfiddle显示iframe的网址！

但如果您的网页位于http://domain.com/folder/page.php，则必须撰写href='/folder/page.php'以获得正确的行为！

Jquery li onclick添加类

2 个答案: