Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 19.07.2013, 07:12
Новичок на форуме
Отправить личное сообщение для Setta Посмотреть профиль Найти все сообщения от Setta
 
Регистрация: 19.07.2013
Сообщений: 6

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

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


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



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>
Ответить с цитированием
  #2 (permalink)  
Старый 19.07.2013, 07:39
Аватар для ОлегА
Профессор
Отправить личное сообщение для ОлегА Посмотреть профиль Найти все сообщения от ОлегА
 
Регистрация: 25.08.2011
Сообщений: 420

где кнопки?)
Ответить с цитированием
  #3 (permalink)  
Старый 19.07.2013, 07:47
Аватар для ОлегА
Профессор
Отправить личное сообщение для ОлегА Посмотреть профиль Найти все сообщения от ОлегА
 
Регистрация: 25.08.2011
Сообщений: 420

#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')
})
Ответить с цитированием
  #4 (permalink)  
Старый 19.07.2013, 09:13
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 28,604

ОлегА,
а event.preventDefault() ? проверка зачем if( $('#menu .button_fixed').length )?
Ответить с цитированием
  #5 (permalink)  
Старый 19.07.2013, 09:22
Аватар для ОлегА
Профессор
Отправить личное сообщение для ОлегА Посмотреть профиль Найти все сообщения от ОлегА
 
Регистрация: 25.08.2011
Сообщений: 420

рони, что бы вернуть кнопку нажатую до этого в исходное состояние
Ответить с цитированием
  #6 (permalink)  
Старый 19.07.2013, 09:35
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

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

Делаем вывод: эта проверка ухудшает читаемость, захламляет код и вредит производительности.
Ответить с цитированием
  #7 (permalink)  
Старый 19.07.2013, 12:42
Аватар для ОлегА
Профессор
Отправить личное сообщение для ОлегА Посмотреть профиль Найти все сообщения от ОлегА
 
Регистрация: 25.08.2011
Сообщений: 420

$('#menu a span').click(function(event){
      $('#menu').find('.button_fixed').removeClass('button_fixed')
      $(this).addClass('button_fixed')
  })
Ответить с цитированием
  #8 (permalink)  
Старый 19.07.2013, 14:25
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 28,604

ОлегА,
без event.preventDefault() страница будет "прыгать" кверху
Ответить с цитированием
  #9 (permalink)  
Старый 19.07.2013, 14:51
Аватар для ОлегА
Профессор
Отправить личное сообщение для ОлегА Посмотреть профиль Найти все сообщения от ОлегА
 
Регистрация: 25.08.2011
Сообщений: 420

$('#menu a span').click(function(event){
      $('#menu').find('.button_fixed').removeClass('button_fixed')
      $(this).addClass('button_fixed')
      return false;
  })
Ответить с цитированием
  #10 (permalink)  
Старый 20.07.2013, 19:28
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 28,604

Сообщение от ОлегА
return false;
не спасёт от прыжка при клике по самой ссылке -- код непродуман
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
смена текста при нажатии на кнопку katjuha6 Элементы интерфейса 8 03.02.2013 21:05
Присвоение значений элементу input при нажатии кнопки. Минин Игорь Элементы интерфейса 8 26.11.2012 04:01
Подскажите как убрать часть текста при нажатии на кномпу или гиперссылку. potkin Общие вопросы Javascript 6 10.10.2008 06:55
Firefox: перехватить соббытие при перетаскивании текста no_alex Общие вопросы Javascript 9 21.08.2008 17:02
вывод нужного текста в текстовом поле при нажатии на кнопку! fifo4ka Общие вопросы Javascript 7 06.05.2008 12:36