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', this).addClass('selected'); //apply to  anchor element also

当你删除课程时，请遵循相同的协议。

因此，您希望在不同的页面上保持按钮状态。只要页面处于打开状态，Javascript才有效。一旦用户转到新页面，所有javascript都将被重置。为了克服这个问题，你可以做以下两件事之一：

1）如果您使用母版页作为菜单，请在列表项中添加runat="server"属性，并从后面的代码中将所选类添加到您子页面中的相应列表项中（可能您可以拥有您的母版页中的公共功能）

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

    //in Child page
    Master.SetHomeMenu();

2）如果你想在javascript中这样做，你需要阅读你的网址，解析它，然后将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”）＆gt; -1）

Answer 2

这样做了。你忘了设置所选的类css

http://fiddle.jshell.net/54uDQ/

重要的部分是这个css

#navigation a:hover, #navigation a.selected
{

    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
}

Answer 3

正如其他人所说，你没有.selected类，你的js会在点击一个时将所有li元素设置为选中，你可能想在第二行将其更改为

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

Answer 4

#navigation li.a.seletected a.seletected 
{
    background: white; // or background Image or whatever it is your doing to make this      white.
}

Answer 5

您甚至没有在CSS中为“选定”设置类。

添加它，它应该可以工作。

#navigation li .selected {
   [CSS to make white background here.]
}

Answer 6

据我所知，你没有为selected类定义任何样式。

将该课程分配给您的课程是不够的。您还需要按照自己喜欢的方式设置课程风格。

.selected{
 background-color:#fff;
}

（等）

Answer 7

你没有'.selected'的CSS。因此，添加样式以将按钮变为白色。
您的jQuery不正确。在click函数中，以'this'为目标，因为它针对您单击的特定元素。
```
$('#navigation li').click(function(event) {
   $(this).addClass('selected');
});
```

li菜单需要“选中”类

7 个答案: