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

Question

我有5个项目的水平CSS菜单。

例如1）主页2）用户3）类别4）产品5）联系

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

我希望div的背景色在选择“用户”时更改为绿色，在选择“类别”时更改为紫色。

我怎样才能做到这一点？

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