jQuery 选择时如何更改菜单背景颜色？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21225745/
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
how to change menu background color when selected?
提问by user3128668
I started learning CSS these days, currently i was given with one CSS task, i've tried but iam not getting it..
这些天我开始学习 CSS，目前我被赋予了一项 CSS 任务，我已经尝试过但我没有得到它..
here is my requirement:
这是我的要求：
The site is http://mywebsite.com/ .
You will notice the the menu bar has a hover the color is #1B3E70.
That's the color I want to the selected menu bar item to display when the on the corresponding area/page.
您会注意到菜单栏有一个颜色为 的悬停#1B3E70。这就是我希望所选菜单栏项在相应区域/页面上显示的颜色。
I tried as below but not getting:
我尝试如下但没有得到：
a:visited{
background: #1B3E70;
}
please suggest me..
请建议我..
回答by suraj rawat
With Reference to your link (classes and id) :
参考您的链接（类和 ID）：
HTML
HTML
<li class="menu-item">
<a href="#">About</a>
<a href="#">Home</a>
</li>
CSS
CSS
.menu-item{
list-style:none;
}
.menu-item a{
padding:20px;
padding-bottom:10px;
border:1px solid #1B3E70;
color:#1B3E70;
text-decoration:none;
}.menu-item a:hover{
background-color:#1B3E70;
color:white;
}
.menu-item .active{
background-color:#1B3E70;
color:white;
}
Jquery
查询
$('.menu-item a').click(function(){
$(this).addClass('active').siblings().removeClass('active');
});
Live Example http://jsfiddle.net/7VBy9/
回答by Milind Anantwar
The background-color on a:visited only seems to work in FF, Chrome and Safari. if the normal a has a background-color, either explicitly defined or through inherit (the direct parent must actually have a background-color for this to be true).
a:visited 上的背景颜色似乎只适用于 FF、Chrome 和 Safari。如果法线 a 具有背景颜色，无论是显式定义还是通过继承（直接父级实际上必须具有背景颜色才能为真）。
Obviously it is not ideal to have to define a background-color for a all the time, as the site may have a background image.
显然，必须始终定义背景颜色并不理想，因为站点可能有背景图像。
回答by Felix
If you means highlight the current menu text when it's clicked, then you can try to use this code:
如果您的意思是在单击时突出显示当前菜单文本，那么您可以尝试使用以下代码：
$(function() {
$('#nav li').click(function() {
$(this).find('a').addClass('active');
$(this).siblings('li').find('a').removeClass('active');
})
});
and add .activein your css:
并添加.active你的css：
.active {
background: #1B3E70;
}
回答by mahendra rajeshirke
Try,
尝试，
jQuery(function(){
jQuery('#nav li a').click(function() {
jQuery('#nav li a').removeClass('active');
jQuery(this).addClass('active');
});
});
Also add following css to your file
还将以下 css 添加到您的文件中
.links a.active {
color: #FFFFFF;
background-color: #1B3E70;
}
回答by Vinayak Pingale
Try using this for changing the color.
尝试使用它来改变颜色。
a:visited {color: #1B3E70;}
