当前菜单页面项背景未更改 - CSS答案

【问题标题】：Current Menu Page Item Background Not Changing - CSS当前菜单页面项背景未更改 - CSS
【发布时间】：2014-03-20 13:30:02
【问题描述】：

我正在尝试获取一个小图形来指定查看者使用 css 所在的页面，但它不会突出显示。这是我的代码：

HTML：

 <ul class="side-nav">
 <a href="http://www.cieloazulsantafe.com/nav-test.html"><li><span>Home</span></li></a>
 <a href="http://www.cieloazulsantafe.com/sample-page.html"><li>
 <span>Sample Page</span></li></a>
 </ul>

CSS：

 ul.side-nav span{
  margin-left: 50px;    
  text-decoration: none;
  color: #fff;
  }
 ul.side-nav a li{
 background: url('http://cieloazulsantafe.com/wp-content/uploads/2014/03/nav-grad.png');
 list-style: none;
 height: 41px;
 width: 250px;
 line-height: 2.0;
 text-decoration: none;
 }
 ul.side-nav a li:hover{
 background: url('http://cieloazulsantafe.com/wp-content/uploads/2014/03/nav-grad1.png');   
 }
 ul.side-nav a li.current-menu-item{
 background: url('http://cieloazulsantafe.com/wp-content/uploads/2014/03/nav-grad1.png');
}
a{
text-decoration: none;  
}

看起来很简单，但我就是无法改变背景。我知道它是因为它是 li 元素，但我猜“当前菜单项”的顺序是错误的。

网址：http://cieloazulsantafe.com/nav-test.html 提前致谢。

【问题讨论】：

首先，您的 HTML 已损坏。不要将<li> 放在<a> 标签之间。 <ul><li><a href="#">foo</a></li></ul> 可以，<ul><a href="#"><li>foo</li></a></ul> 不行。即使:hover 工作并显示所有内容，浏览器仍以怪异模式工作
某些东西（javascript 调用或 php 检查）必须使菜单项获得 current-menu-item 类，否则它将不起作用
我需要整个<li> 成为一个活动链接。
@webeno 他也可以使用不受欢迎的主播的:active 选择器，但首先他需要修复他的html
<ul class="side-nav"><li><a href="#"></a></li></ul>好的

标签： html css navigation

【解决方案1】：

你必须给body命名（给它一个id）和li标签，并在你的css中分别引用它们。这是最简单的纯 css 方式。

HTML

<body id="home-body"> // ... on your home page

...

<body id="about-body"> // ... on your about page

您的导航

<li id="home-menu">Home</li>
<li id="about-menu">About</li>

CSS

body#home-body li#home-menu, body#about-body li#about-menu { // style of the active menu item }

您可能想看看我在以下问题上提供的答案：How can I use one Nav Bar code on multiple pages, BUT have the current page highlighted?

编辑：这是“纯css”方式；但根据您的需要，这条路可能还有其他方法。

【讨论】：

你不应该有两个同名的 id。这是不好的做法。
抱歉@webeno 我没有看到编写这么多代码来添加样式的优势/差异，而不是仅仅在<li> 上添加current-class，您正在为每个页面编写不同的ID正文，在我看来，它是不必要的 CSS 代码。更改您的回复中的某些内容，以便我可以将其否决，我将重复的 ID 放在那里，但您更改了它。
@Mattos 这是纯 CSS 方法，伙计，您的方法总是只会突出显示您添加 current 类的一个菜单项，它永远不会更改为实际的菜单项单击另一个，而如果您应用我的解决方案，它会。我建议您在否决正确答案之前做更多的研究！
@Mattos 这是支持我的理论的另一个 URL：http://www.mstudiostalk.com/2008/03/11/pure-css-to-display-the-active-page-in-the-navigation/，我也在我自己的几个网站上积极使用它并取得了成功。
@webeno 好的，我明白你的意思，我现在更清楚地看到了好处，对不起，我需要你编辑你的答案，真的，否则系统不会让我改变反对票。

【解决方案2】：

检查这个小提琴http://jsfiddle.net/luckmattos/aN2ny/

您的 HTML 和 CSS 已损坏：

HTML

<ul class="side-nav">
<li><a href="#">Home</a></li>
<li class="current-menu-item"><a href="#">Current</a></li>
</ul>

<a> 必须在<li> 内，将文本属性放在<a> 上。最重要的是，您忘记将 current-menu-item 类放在当前的 <li> 上。

CSS

ul.side-nav {
    margin-left: 50px;    
    text-decoration: none;
    padding:0px;
    list-style: none;
    width: 250px;
 }
 ul.side-nav li{
     padding:0px;
     margin:0px;
     display:block;
     background: url('http://cieloazulsantafe.com/wp-content/uploads/2014/03/nav-grad.png');
     height: 41px;
     cursor:pointer;  
 }
ul.side-nav li a {
    margin:0px;
    display:block;
    padding-left:50px;
    text-decoration:none;
    color: #fff;
    height:41px;
    line-height:41px;
}
ul.side-nav li a:hover, 
ul.side-nav li.current-menu-item {
     background: url('http://cieloazulsantafe.com/wp-content/uploads/2014/03/nav-grad1.png');   
 }

有几个小改动，看看代码。

【讨论】：

这将始终突出显示一个菜单项，但我了解 OP 希望在查看者位于相应页面上时突出显示菜单项。
@webeno 当然，他可以手动将类或通过js放在每个页面上。纯 CSS 无法做到这一点。
这不正确，看看我的代码。它也被接受为所提问题的正确答案。
我可以否决你的答案，但我认为这不公平，因为虽然我认为你没有完全回答 OP 的问题，但它部分是正确的答案，而且我已经看到它被用于许多类似的问题。如果你能从我的投票中删除你的反对票，我仍然很感激，特别是如果你没有测试并且显然错误地认为这是一个错误的答案。