根据菜单选择更改菜单的背景颜色
问题描述:
我有一个包含5个项目的水平css菜单。根据菜单选择更改菜单的背景颜色
例如 1)家庭 2)用户 3)范畴 4)产品 5)整个菜单的div联系
当 “家” 被选择的背景颜色(通过CSS)(ID = “topmenu”)是蓝色的。
我想要选择“用户”时将div的背景颜色改为绿色,选择“类别”时改为紫色。
我该怎么做?
答
<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>
喜欢的东西这应该做我想的技巧。
答
您可以设置多个类,像这样:
<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;
}
答
您可能希望将各个元素放入一个<span>
标记中,在标记中您可以更好地控制各个项目的外观。
例如:
<span id="users">Users</span> <span id="category">Category</span>
那么CSS可能类似于:
span#users:hover { background-color: green; }
span#category:hover { background-color: purple; }
其实我还没有得到HTML但当我想先得到最好的行动过程。感谢您的建议,我明白你想告诉我什么。 – cunners 2009-01-21 05:37:13