根據菜單選擇更改菜單的背景顏色

Question

我有一個包含5個項目的水平css菜單。

例如 1）家庭 2）用戶 3）範疇 4）產品 5）整個菜單的div聯繫

當 「家」 被選擇的背景顏色（通過CSS）（ID = 「topmenu」）是藍色的。

我想要選擇「用戶」時將div的背景顏色改爲綠色，選擇「類別」時改爲紫色。

我該怎麼做？

Answer 1

<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 2

您可以設置多個類，像這樣：

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