li菜单需要“选中”类
当用户点击菜单选项卡时，我希望它保持选中状态，并带有白色按钮。
这是我的尝试，但它不起作用。 如果你点击主页按钮它不会保持白色。
HTML
CSS：
body{ background-color:orange; } #navigation a { background: url("http://sofzh.miximages.com/jquery/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://sofzh.miximages.com/jquery/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'); });
有任何想法吗？
我在这看到几处修改。
首先，当您应用所选的类时，您将应用于所有li项，这不是真的。 您只想将该类应用于单击的列表项。
其次，当您单击另一个列表项时，您想要删除所选的类。
所以修改后的代码是：
$('#navigation li').click(function() { $('#navigation li').removeClass('selected'); $(this).addClass('selected'); });
最重要的是，您没有selected课程。 我把一个临时选择的类定义如下：
.selected{ border: 1px solid #888; background-color: #white;
}
你可以在这里看到一个有效的例子： 在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中做，你需要阅读你的url，解析它，然后将selected类添加到适当的li
//put this javascript in your head section or even at the bottom, just before closing // body tag $(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"); } });
但要实现此function，您需要将id属性添加到列表项中，如下所示：
要使用最后一个解决方案，您需要将if语句更改为此示例：
if（window.location.href.indexOf（“home”）> -1）
正如其他人所说，你没有.selected类，你的js会在点击一个时将所有li元素设置为选中，你可能想在第二行将其改为
$('#navigation li').click(function() { $(this).addClass('selected'); });
这样做了。 你忘了设置所选的类css
http://fiddle.jshell.net/54uDQ/
重要的是这个css
#navigation a:hover, #navigation a.selected { background: url('http://sofzh.miximages.com/jquery/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 li.a.seletected a.seletected { background: white; // or background Image or whatever it is your doing to make this white. }
你甚至没有在CSS中为’selected’设置一个类。
添加它，它应该工作。
#navigation li .selected { [CSS to make white background here.] }
据我所知，你没有为selected类定义任何样式。
将该课程分配给您的课程是不够的。 您还需要按照自己喜欢的方式设置课程风格。
.selected{ background-color:#fff; }
（等等）
-
你没有’.selected’的CSS。 因此，添加样式以将按钮变为白色。
-
你的jQuery不正确。 在click函数中，以’this’为目标，因为它针对您单击的特定元素。
$('#navigation li').click(function(event) { $(this).addClass('selected'); });