Question

我有一个包含5个项目的水平css菜单。

e.g 1）回家 2）用户 3）类别 4）产品 5）联系

当选择“home”时，整个菜单div（id =“topmenu”）的背景颜色（通过css）为蓝色。

我希望div的背景颜色在选择“users”时更改为绿色，并在选择“category”时说紫色。

我该怎么做？

Answer 1

您可以设置多个类：

<ul> 
   <li class="Menu1 Selected"><a href="#">Home</a></li> 
   <li class="Menu2"><a href="#">Users</a></li>
</ul>

然后在你的CSS中，你为每个菜单项设置了一个类集，用于它的选择状态：

.Menu1 .Selected
{
   background-color: #000000;
}
.Menu2 .Selected
{
   background-color: #ffffff;
}

Answer 2

<div id="topmenu">
<ul>
<li><a href="home" onclick="changeBackground('green');">Home</a></li>
<li><a href="users" onclick="changeBackground('blue');">Users</a></li>
<li><a href="home" onclick="changeBackground('purple');">Category</a></li>
<li><a href="home" onclick="changeBackground('brown');">Products</a></li>
<li><a href="users" onclick="changeBackground('orange');">Contact</a></li>
</ul>
</div>
<script type="text/javascript">

function changeBackground(color){
  document.getElementById("topmenu").style.backgroundColor = color;
  return false;
}
</script>

这样的事情应该是我认为的伎俩。

Answer 3

您可能希望将各个元素放入<span>标记中，您可以在其中更好地控制单个项目的外观。

例如：

<span id="users">Users</span> <span id="category">Category</span>

然后CSS看起来像：

span#users:hover { background-color: green; }

span#category:hover { background-color: purple; }

根据菜单选择更改菜单的背景颜色

3 个答案: