Изменить цвет фона меню на основе выбора меню

Question

У меня горизонтальное меню css с 5 пунктами.

например 1) Домой 2) Пользователи 3) Категория 4) Продукты 5) Контакт

Когда выбрано "home", цвет фона (через css) всего меню div (id = "topmenu") - синий.

Я хочу, чтобы цвет фона div изменялся на зеленый, когда выбрано "users", и фиолетовый, когда выбрана "category".

Как я могу это сделать?

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

Возможно, вы захотите поместить отдельные элементы в тег <span>, в котором вы сможете лучше контролировать внешний вид отдельных элементов.

Например:

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

тогда CSS может выглядеть примерно так:

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

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

Answer 3

Вы можете настроить несколько классов следующим образом:

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