jQuery li 菜单需要“selected”类
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6873348/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
li menu needs class of "selected"
提问by PD24
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
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:
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
JS
$('#navigation li').click(function() {
$('#navigation li').addClass('selected');
});
any ideas?
有任何想法吗？
回答by iamserious
I see several modifications here.
我在这里看到了一些修改。
Firstly, when you apply selected class, you are applying to all liitems, which is not true. you only want to apply the class to clicked list item.
首先，当您应用选定的类时，您将应用到所有li项目，这是不正确的。您只想将该类应用于单击的列表项。
secondly, when you click another list item, you want to remove the selected class.
其次，当您单击另一个列表项时，您想删除所选的类。
so the code modified would be:
所以修改后的代码是：
$('#navigation li').click(function() {
$('#navigation li').removeClass('selected');
$(this).addClass('selected');
});
Most importantly, you do not have a selectedclass. I put a temporary selected class definition like so:
最重要的是，你没有selected课。我放置了一个临时选择的类定义，如下所示：
.selected{
border: 1px solid #888;
background-color: #white;
}
}
You can see a working example here: on JsFiddle
你可以在这里看到一个工作示例：在 JsFiddle
additionally, your aelement has a gray background. so you might want to apply selected white background class to your a element also.. something like:
此外，您的a元素具有灰色背景。因此，您可能还想将选定的白色背景类应用到您的 a 元素中……例如：
$('a', this).addClass('selected'); //apply to anchor element also
and when you remove the class, follow the same deal.
当您删除课程时，请遵循相同的规则。
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:
所以你想在不同的页面上保持按钮状态。Javascript 只有在页面打开时才有效。一旦用户进入新页面，所有 javascript 都将被重置。为了克服这个问题，您可以执行以下两件事之一：
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)
1）如果您使用母版页作为菜单，请runat="server"为您的列表项添加属性，并从后面的代码中，将选定的类添加到您的子页面中的适当列表项（可能您的母版页中可能有一个公共功能）
//Master page
public SetHomeMenu()
{
liHome.Attributes.Add("class","selected");
}
//in Child page
Master.SetHomeMenu();
2) If you want to do it in javascript, you need to read your url, parse it, then add selectedclass to appropriate li
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");
}
});
But for this to work, you need to add idattributes to your list items like so:
但要使其正常工作，您需要向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>
For use the last solution you need to change the if statement to this example:
要使用最后一个解决方案，您需要将 if 语句更改为此示例：
if(window.location.href.indexOf("home") > -1)
if(window.location.href.indexOf("home") > -1)
回答by Joseph Marikle
This'd do it. You forgot to set the selected class css
这样就可以了。您忘记设置所选类的 css
http://fiddle.jshell.net/54uDQ/
http://fiddle.jshell.net/54uDQ/
The important part is this css
重要的部分是这个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
}
回答by Matt
As others stated you dont have a .selected class also your js will set all li elements to selected when one is clicked you may want to change it to this on the second line
正如其他人所说，您没有 .selected 类，您的 js 也会在单击时将所有 li 元素设置为选中状态，您可能希望在第二行将其更改为此
$('#navigation li').click(function() {
$(this).addClass('selected');
});
回答by pat8719
#navigation li.a.seletected a.seletected
{
background: white; // or background Image or whatever it is your doing to make this white.
}
回答by Devin
You haven't even set a class for 'selected' in your CSS.
您甚至还没有在 CSS 中为“selected”设置一个类。
Add this and it should work.
添加它，它应该可以工作。
#navigation li .selected {
[CSS to make white background here.]
}
回答by Jamie Dixon
As far as I can tell from your CSS, you haven't defined any styles for the selectedclass.
据我从您的 CSS 中得知，您尚未为selected该类定义任何样式。
Assigning that class to your li isn't enough. You also need to style the class in the way you'd like.
将那个班级分配给你的 li 是不够的。您还需要按照您喜欢的方式设置类的样式。
.selected{
background-color:#fff;
}
(etc)
（等等）
回答by Paul Sham
You have no css for '.selected'. So, add the styling to turn the button white.
Your jQuery is incorrect. In the click function, target 'this' because that targets the specific element that you clicked.
$('#navigation li').click(function(event) { $(this).addClass('selected'); });
您没有“.selected”的 css。因此，添加样式以将按钮变为白色。
您的 jQuery 不正确。在点击功能中，定位“this”，因为它定位您点击的特定元素。
$('#navigation li').click(function(event) { $(this).addClass('selected'); });
