0

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

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

单击菜单时，它显示背景颜色，但随后消失。在单击不同的菜单之前，如何使其保持活动状态？

谢谢你

4

2 回答 2

3

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），其中强制转换只是摆脱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>​
于 2012-08-13T21:46:34.460 回答
1

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

$(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/因为那是 jsfiddle 显示 iframe 的 url ！
href="/_display/"

但是，如果您的页面在您的页面中，http://domain.com/folder/page.php您将不得不写信href='/folder/page.php'以获得正确的行为！

于 2012-08-13T21:51:34.003 回答