jquery - li菜单需要 "selected"的类

Question

当用户单击菜单选项卡时，我希望它保持选中状态，并带有白色按钮。

这是我的尝试，但它不起作用。如果您单击主页按钮，它不会保持白色。

html

<ul id="navigation">
    <li><a href="#"><span>HOME</span></a></li>
    <li><a href="/en-us/about.aspx"><span>ABOUT</span></a></li>
    <li><a href="/en-us/contact.aspx"><span>CONTACT</span></a></li>
</ul>

CSS:

body{
    background-color:orange;
}

#navigation a
{
    background: url("http://i52.tinypic.com/spxfdw.png") no-repeat scroll 0 0 transparent;
    color: #000000;
    height: 43px;
    list-style: none outside none;
    padding-left: 10px;
    text-align: center;
    text-decoration: none;
    width: 116px;
}

#navigation a span
{
    padding-right: 10px;
    padding-top: 15px;
}

#navigation a, #navigation a span
{
    display: block;
    float: left;

}

/* Hide from IE5-Mac \*/
#navigation a, #navigation a span
{
    float: none
}
/* End hide */

#navigation a:hover
{

    background: url('http://i51.tinypic.com/2iih9c9.png') no-repeat scroll 0 0 transparent;
    color: #000000;
    height: 43px;
    list-style: none outside none;
    padding-left: 10px;
    text-decoration: none;
    width: 116px;
    text-align:center
}

#navigation a:hover span
{
    background: url(right-tab-hover.gif) right top no-repeat;
    padding-right: 10px
}

#navigation ul
{
    list-style: none;
    padding: 0;
    margin: 0
}

#navigation li
{
    float: left;
    list-style: none outside none;
    margin: 0;
} 

JS

$('#navigation li').click(function() {
    $('#navigation li').addClass('selected');
});

有什么想法吗？

Answer 1

我在这里看到了一些修改。

首先，当您应用选定的类时，您将应用到所有 li 项，这是不正确的。您只想将该类应用于单击的列表项。

其次，当您单击另一个列表项时，您想要删除所选的类。

所以修改后的代码是:

$('#navigation li').click(function() {
    $('#navigation li').removeClass('selected');
    $(this).addClass('selected');
});

最重要的是，您没有selected 类。我放置了一个临时选定的类定义，如下所示:

.selected{
border: 1px solid #888;
background-color: #white;

}

您可以在此处查看一个工作示例:on JsFiddle

此外，您的 a 元素具有灰色背景。所以您可能还想将选定的白色背景类应用到您的 a 元素..类似于:

$('a', this).addClass('selected'); //apply to  anchor element also

当您删除类(class)时，请遵循相同的协议(protocol)。

因此您希望在不同页面上保留按钮状态。 Javascript 仅在页面打开时有效。一旦用户进入新页面，所有 JavaScript 都会被重置。要克服这个问题，您可以执行以下两项操作之一:

1) 如果您使用菜单母版页，请将 runat="server" 属性添加到列表项，并从代码隐藏中将选定的类添加到子页面中的相应列表项(也许您可以在母版页中拥有公共(public)功能)

    //Master page
    public SetHomeMenu()
    {
        liHome.Attributes.Add("class","selected");
    }

    //in Child page
    Master.SetHomeMenu(); 

2) 如果您想在 JavaScript 中执行此操作，则需要读取您的 url，解析它，然后将 selected 类添加到适当的 li

//put this javascript in your head section or even at the bottom, just before closing
// body tag </body>

    $(document).ready(function () {
        if(window.location.href.indexOf("home"))
        {
             $("#navigation li#home").addClass("selected");
        }
        else if(window.location.href.indexOf("about"))
        {
             $("#navigation li#about").addClass("selected");
        }
        else if(window.location.href.indexOf("contact"))
        {
             $("#navigation li#contact").addClass("selected");
        } 

    });

但是要使其工作，您需要将 id 属性添加到列表项，如下所示:

<ul id="navigation">
    <li id="home"><a href="#"><span>HOME</span></a></li>
    <li id="about"><a href="/en-us/about.aspx"><span>ABOUT</span></a></li>
    <li id="contact"><a href="/en-us/contact.aspx"><span>CONTACT</span></a></li>
</ul>

要使用最后一个解决方案，您需要将 if 语句更改为此示例:

if(window.location.href.indexOf("home") > -1)