如何在选中时更改菜单背景颜色？

Question

我最近开始学习CSS，目前我被分配了一个CSS任务，我已经尝试了但是不太理解。

以下是我的要求：

The site is http://mywebsite.com/ .  

你会注意到菜单栏有一个悬停颜色，它是#1B3E70。 当在相应的区域/页面上时，我想要选定的菜单栏项目显示这种颜色。

我尝试了以下方法但没有成功：

 a:visited{
    background: #1B3E70;
}

请给我建议。

- user3128668

---

可能是使用jquery高亮显示当前页面的重复问题。 - Paulie_D

Answer 1

关于您提供的链接（类和ID）：

HTML

<li class="menu-item">
    <a href="#">About</a>
    <a href="#">Home</a>
</li>

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

现场示例 http://jsfiddle.net/7VBy9/

。

- Suraj Rawat

---

嗨，我尝试了你的代码，但仍然没有得到所需的输出...请告诉我出了什么问题？ - user3128668

目前，无论点击哪个菜单，它都会以所需的颜色被选中，但是颜色仍然保留在该选项卡上。 - user3128668

原因是，当一个选项卡被选中时，您必须从其他选项卡中删除样式/类，这可以通过siblings实现！ - Suraj Rawat

请问您能告诉我应该移除哪个类/样式吗？ - user3128668

活动类，我的朋友 :) - Suraj Rawat

Answer 2

如果您想在当前菜单被点击时高亮显示文本，那么您可以尝试使用以下代码：

$(function() {
     $('#nav li').click(function() {
         $(this).find('a').addClass('active');
          $(this).siblings('li').find('a').removeClass('active');
     })
});

然后在你的CSS中添加.active：

.active {
    background: #1B3E70;
}

- Felix

---

理想情况下，但我不是OP，它也会在向下滚动到那些内容div时进行突出显示。这应该可以解决：https://dev59.com/m13Va4cB1Zd3GeqPFfq3 - jammykam

@Felix：我真的需要在这里使用一些jquery吗？使用一些CSS设置不行吗？ - user3128668

@user3128668，你无法使用纯CSS实现相同的效果，因为:visited伪类在你的情况下不适用。 - Felix

@jammykam 当然可以，因为OP使用单页导航。 - Felix

@Felix，我尝试了你的代码，但没有得到期望的输出结果。我甚至尝试了上面的代码，即user3011961的代码，但那也不起作用。目前我正在使用user3011961的代码，我认为他的代码是正确的，因为他在fiddle中展示了输出结果，请问您能否建议我他的代码出了什么问题？ - user3128668

user3218668的代码对我来说似乎是有效的，但问题是：目前，无论点击哪个菜单，它都会以所需的颜色被选中，但颜色仍然保留在该选项卡上。因此，请告诉我需要更改他的函数中的代码。 - user3128668

Answer 3

试一下，

jQuery(function(){
 jQuery('#nav li a').click(function() {
 jQuery('#nav li a').removeClass('active');
 jQuery(this).addClass('active');
 });
});

还要将以下CSS代码添加到您的文件中。

.links a.active {
    color: #FFFFFF;
    background-color: #1B3E70;
}

- mahendra rajeshirke

Answer 4

a:visited 上的 background-color 似乎只在 FF、Chrome 和 Safari 中有效。如果普通的 a 元素有 background-color，无论是显式定义还是通过继承（直接父元素必须实际上有 background-color 才为真），都会出现这种情况。

显然，每次都为 a 定义 background-color 并不理想，因为网站可能有背景图像。

- Milind Anantwar

---

那么，我需要做哪些更改？ - user3128668

请查看此链接：https://dev59.com/UGzXa4cB1Zd3GeqPY-rV - Milind Anantwar

Answer 5

尝试使用这个来改变颜色。

a:visited {color: #1B3E70;} 

- Vinayak Pingale