Question

I have a horizontal css menu with 5 items.

e.g 1) Home 2) Users 3) Category 4) Products 5) Contact

When ‘home’ is selected the background color (via css) of the entire menu div (id=’topmenu’) is blue.

I want the background color of the div to change to say green when ‘users’ is selected and say purple when ‘category’ is selected.

How can I do this?

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> 

Something like that should do the trick I think.