Question

这让我感到畏惧，我看不到要走的路。这是我第一次在这里提出问题，如果我不遵守协议，请纠正我。感谢!!!

我需要根据所选项目更改菜单的背景，因此当激活时，左侧的项目将以橙色显示，同时将右侧的项目保持为灰色。

此外，分隔颜色的三角形必须保持在活动菜单项的右侧。

对于第一个元素，很容易，但是第二个和前进，我不能使代码工作，因为它切入菜单的边界。

例如，我有[个体] [empresas] [corredores] [provedores]

当empresas活跃时，个人和empresas应该是橙色，而corredores和provenores应该是灰色的。

如果选择了corredores，那么个人，empresas和corredores应为橙色，而provedores为灰色。

我想张贴一张图片来说明，但作为新手我不被允许。

#navigation {
  position: absolute;
  line-height: 40px;
  padding: 0;
  margin: 0;
  margin-left: 210px;
  width: 730px;
  background-color: #757373;
}

#navigation ul li a {
  text-decoration: none;
  float: left;
  padding: 0 40px 0 10px;
}

#navigation .empresas .active {
  background: url(images/the-background.png) no-repeat right;
}

这个很好 First active element appears correctly

这个不是，看看INDIVIDUOS应该是橙色的 Second element is missing orange on the left for first element

Answer 1

也许this fiddle提供了一些灵感？

CSS：

#navigation li {
    background-color: #ffa500;
}
#navigation li.active+li,
#navigation li.active+li+li,
#navigation li.active+li+li+li,
#navigation li.active+li+li+li+li,
#navigation li.active+li+li+li+li+li {
    background-color: #757373;
}

HTML：

<div id="navigation">
    <ul>
        <li><a href="">professionals</a></li>
        <li><a href="">organizations</a></li>
        <li class="active"><a href="">others</a></li>
        <li><a href="">others2</a></li>
    </ul>
</div>

<强>更新

使用“箭头”等查看updated fiddle。如果您希望在IE7中也能使用此功能，请添加span元素，而不是使用:before和:after。

Answer 2

解决方案 好的，问题解决了，这是我见过的最干净的技巧。我不需要在php，类等中添加任何其他内容。一位同事指出了解决方案。所需要的只是z-index和定位的一些技巧。感谢@peter和@PeterSmith的输入。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Ejemplo menú</title>

<style type="text/css">

ul { list-style-type: none; }

ul li { display: inline; position: absolute; text-align: right; }

a { position: absolute; }

.uno { border: 1px #FF6600 solid; z-index: 4; width: 100px; }
a.uno:hover { background: #FF6600; }

.dos { border: 1px #FF6600 solid; z-index: 3; width: 200px; }
a.dos:hover { background: #FF6600; }

.tres { border: 1px #FF6600 solid; z-index: 2; width: 300px; }
a.tres:hover { background: #FF6600; }

.cuatro { border: 1px #FF6600 solid; z-index: 1; width: 400px; }
a.cuatro:hover { background: #FF6600; }

</style>

</head>

<body>
<ul>
<li><a href="" class="uno">PRUEBA 1</a></li>
<li><a href="" class="dos">PRUEBA 2</a></li>
<li><a href="" class="tres">PRUEBA 3</a></li>
<li><a href="" class="cuatro">PRUEBA 4</a></li>
</ul>
</body>
</html>

Answer 3

编辑：刚看到下面关于.active类的最新评论。

如果你可以为你的页面添加一些javascript，你可以为每个li项目运行for循环，在其类中附加“orange”，直到找到.active类，然后其余的将附加“grey”上课。当我有空闲时间后，我会尝试一个小提琴手

如何根据所选项目在菜单上更改背景

3 个答案: