Modifier la couleur d'arrière-plan du menu en fonction de la sélection du menu

Question

J'ai un menu CSS horizontal avec 5 éléments.

par exemple 1) Accueil 2) Les utilisateurs 3) Catégorie 4) Produits 5) Contact

Lorsque la "maison" est sélectionné la couleur d'arrière-plan (via css) du menu entier div (id = "topmenu") est bleu. Je veux que la couleur d'arrière-plan du div change pour dire vert quand "utilisateurs" est sélectionné et dire violet quand "catégorie" est sélectionné.

Comment est-ce que je peux faire ceci?

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> 

Quelque chose comme ça devrait faire l'affaire je pense.

Answer 2

Vous pouvez configurer plusieurs classes comme ceci:

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

Ensuite, dans votre CSS vous avez un ensemble de classe pour chaque élément de menu pour il est sélectionné état:

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

Answer 3

Vous pouvez placer les éléments individuels dans une balise <span>, dans laquelle vous aurez plus de contrôle sur l'apparence des éléments individuels.

Par exemple:

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

alors le CSS pourrait ressembler à:

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

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