li 菜单需要“selected"类 [英] li menu needs class of "selected"

问题描述

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

when the user clicks on a menu tab i want it to remain selected with it a white button.

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

here is my attempt but its not working. if you click the home button it doesnt remain white.

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

有什么想法吗?

推荐答案

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

I see several modifications here.

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

Firstly, when you apply selected class, you are applying to all li items, which is not true. you only want to apply the class to clicked list item.

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

secondly, when you click another list item, you want to remove the selected class.

所以修改后的代码是:

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

最重要的是，您没有 selected 类.我像这样放置了一个临时选择的类定义:

Most importantly, you do not have a selected class. I put a temporary selected class definition like so:

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

}

您可以在这里看到一个工作示例:在 JsFiddle

You can see a working example here: on JsFiddle

另外，您的 a 元素具有灰色背景.因此，您可能还想将选定的白色背景类应用到您的 a 元素中……例如:

additionally, your a element has a gray background. so you might want to apply selected white background class to your a element also.. something like:

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

当你移除课程时，遵循同样的规则.

and when you remove the class, follow the same deal.

所以你想在不同的页面上保持按钮状态.Javascript 只有在页面打开时才有效.一旦用户进入新页面，所有 javascript 都将被重置.要克服这个问题，您可以执行以下两项操作之一:

So you want to persist the button states across different Pages. Javascript is only valid as long as the page is open. As soon as the user goes to the new page, all javascript will be reset. To overcome this you can do one of these two things:

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

1) If you are using a master page for menu, add runat="server" attribute to your list items, and from code behind, add selected class to appropriate list item from your child page (may be you could have a public function in your Master page)

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

    //in Child page
    Master.SetHomeMenu(); 

2) 如果你想用 javascript 来做，你需要读取你的 url，解析它，然后将 selected 类添加到适当的 li

2) If you want to do it in javascript, you need to read your url, parse it, then add selected class to appropriate 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 属性添加到您的列表项中，如下所示:

But for this to work, you need to add id attributes to your list items like so:

<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 语句更改为此示例:

For use the last solution you need to change the if statement to this example:

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

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

这篇关于li 菜单需要“selected"类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！