Изменение цвета текста кнопки и цвета кнопки при нажатии

[Setta]

Подскажите!

Есть несколько кнопок меню. Нужно, что бы при нажатии на одну из них, менялся ее цвет и цвет текста на кнопке. И фиксировался.А при нажатии на другую кнопку, цвет кнопки и цвет текста у первой возвращался,а новая кнопка в свою очередь так же меняла цвет и цвет текста на ней.
Если можно, покажите, как это можно организовать.Спасибо!

Прилагаю код для подробности:



CSS:

h1 {  
  font-family:Verdana, Arial, Helvetica, sans-serif;  
  font-size:13px;  
  font-weight:bold;  
  margin:0;  
  padding:0;}  

 hr {  
  border:none;  
  border-top:1px solid #CCCCCC;  
  height:1px;  
  margin-bottom:25px;}  

 ul {  
  list-style: none;  
  margin: 0;  
  padding: 0;}  

 img {border: none;}  

 #menu {  
  width: 168px;  
  margin: 0px;  
  border-style: solid solid none solid;  
  border-color: #000;  
  border-size: 1px;  
  border-width: 1px;}  

 #menu li a {  
  height: 32px;  
  voice-family: "\"}\"";  
  voice-family: inherit;  
  height: 24px;  
  text-decoration: none;}  

 #menu li a:link, #menu li a:visited {  
  color: #9cff00;  
  display: block;  
  background: url(http://wallaby.ucoz.ru/_ph/1/2/631039619.gif);  
  padding: 8px 0 0 10px;}  

 #menu li a:hover {  
  color: #9cff00;  
  background: url(http://wallaby.ucoz.ru/_ph/1/2/138374785.gif) 0 -32px;  
  padding: 8px 0 0 10px;}

HTML:

<div id="menu">  
 <ul>  
 <li><a href="#"><span style="color:fff"><b>Главная</b></span></a></li> 
 <li><a href="#"><span style="color:fff"><b>Форум</b></span></a></li> 
 <li><a href="#"><span style="color:fff"><b>Галерея</b></span></a></li> 
 <li><a href="#"><span style="color:fff"><b>ClanWars</b></span></a></li> 
 <li><a href="#"><span style="color:fff"><b>Фильмы</b></span></a></li> 
 </ul> 
 </div>

[ОлегА]

где кнопки?)

[ОлегА]

#menu .button_fixed { color:red; background:blue; }
#menu .button_no_fixed { color:fff; }

<div id="menu">  
 <ul>  
 <li><a href="#"><span class="button_no_fixed"><b>Главная</b></span></a></li> 
 <li><a href="#"><span class="button_no_fixed"><b>Форум</b></span></a></li> 
 <li><a href="#"><span class="button_no_fixed"><b>Галерея</b></span></a></li> 
 <li><a href="#"><span class="button_no_fixed"><b>ClanWars</b></span></a></li> 
 <li><a href="#"><span class="button_no_fixed"><b>Фильмы</b></span></a></li> 
 </ul> 
 </div>

$('#menu .button_no_fixed').click(function(){

   if( $('#menu .button_fixed').length ){
     $('#menu .button_fixed').removeClass('button_fixed').addClass('button_no_fixed')
   }

   $(this).removeClass('button_no_fixed').addClass('button_fixed')
})

[рони]

ОлегА,
а event.preventDefault() ? проверка зачем if( $('#menu .button_fixed').length )?

[ОлегА]

рони, что бы вернуть кнопку нажатую до этого в исходное состояние

[danik.js]

рони, видимо чтобы избежать вызова двух нежелательных функций. Однако взамен получаем (при успешной проверке, которая будет почти всегда) лишний вызов функции $ который сильно затмевает всю пользу проверки, ибо $ как минимум в 10 раз медленней обычной функции.

Делаем вывод: эта проверка ухудшает читаемость, захламляет код и вредит производительности.

[ОлегА]

$('#menu a span').click(function(event){
      $('#menu').find('.button_fixed').removeClass('button_fixed')
      $(this).addClass('button_fixed')
  })

[рони]

ОлегА,
без event.preventDefault() страница будет "прыгать" кверху

[ОлегА]

$('#menu a span').click(function(event){
      $('#menu').find('.button_fixed').removeClass('button_fixed')
      $(this).addClass('button_fixed')
      return false;
  })

[рони]

return false;

не спасёт от прыжка при клике по самой ссылке -- код непродуман