Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Изменение цвета текста кнопки и цвета кнопки при нажатии (https://javascript.ru/forum/jquery/39964-izmenenie-cveta-teksta-knopki-i-cveta-knopki-pri-nazhatii.html)

Setta 19.07.2013 08:12
Изменение цвета текста кнопки и цвета кнопки при нажатии
 
Подскажите!

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

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



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>

ОлегА 19.07.2013 08:39
где кнопки?)

ОлегА 19.07.2013 08:47 
#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')
})

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

ОлегА 19.07.2013 10:22
рони, что бы вернуть кнопку нажатую до этого в исходное состояние

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

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

ОлегА 19.07.2013 13:42 
$('#menu a span').click(function(event){
      $('#menu').find('.button_fixed').removeClass('button_fixed')
      $(this).addClass('button_fixed')
  })

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

ОлегА 19.07.2013 15:51 
$('#menu a span').click(function(event){
      $('#menu').find('.button_fixed').removeClass('button_fixed')
      $(this).addClass('button_fixed')
      return false;
  })

рони 20.07.2013 20:28
Цитата:
Сообщение от ОлегА
return false;
не спасёт от прыжка при клике по самой ссылке -- код непродуман

Setta 20.07.2013 23:32
ОлегА! Кнопки в CSS:

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



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

Одна отжатая, вторая-нажатая.

Я пока не очень шарю. Куда вставлять?:
#menu .button_fixed { color:red; background:blue; }
#menu .button_no_fixed { color:fff; }

и
$('#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')
	})

И между какими тегами?

рони 21.07.2013 00:40
Цитата:
Сообщение от Setta
border-size: 1px;
Цитата:
Сообщение от Setta
voice-family: "\"}\"";
:cray: 
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<style type="text/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-width: 1px;
  }

 #menu li a {
  height: 32px;
  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;}


#menu a.button_fixed span{ color:#FF0000; }



</style>
</head>

<body>
<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>
 <script>
 $('#menu a').click(function(event){
      $('#menu .button_fixed').removeClass('button_fixed');
      $(this).addClass('button_fixed');
      event.preventDefault()
   })

 </script>
</body>

</html>

Setta 21.07.2013 07:01
РОНИ! Спасибо! Все переключается как и хотел,но когда вместо ссылки как в примере 
<li><a href=[B]"#"[/B]><span style="color:fff"><b>ClanWars</b></span></a></li>
вставляешь например 
<li><a href=[B]"http://ukozon.ru"[/B]><span style="color:fff"><b>ClanWars</b></span></a></li>
, то при нажатии на кнопку ссылка не работает:cray:

рони 21.07.2013 09:07
Setta,
event.preventDefault() уберите --- но тогда можно всё убрать и вам нужно другое

рони 21.07.2013 09:31
Setta,
скорее всего вам нужно Добавление класса к активной ссылке

ОлегА 22.07.2013 08:16
Цитата:
Сообщение от рони (Сообщение 263328)
не спасёт от прыжка при клике по самой ссылке -- код непродуман
а ты попробуй, а потом говори спасет или нет.

рони 22.07.2013 09:46
ОлегА,
проверьте пожалуйста сами -- кликайте не по буквам тогда попадёте прямо на ссылку

по теме 
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<style type="text/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-width: 1px;
  position: relative;
  top: 700px;
  }

 #menu li a {
  height: 32px;
  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;}


#menu span.button_fixed{ color:#FF0000; }
 body{
   height: 1000px;
 }


</style>
</head>

<body>
<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>
 <script>
 $('#menu a span').click(function(event){
      $('#menu').find('.button_fixed').removeClass('button_fixed')
      $(this).addClass('button_fixed')
      return false;
  })

 </script>
</body>

</html>

ОлегА 22.07.2013 10:08
рони, извиняюсь за упрямство, есть косяк ;)

Setta 29.07.2013 23:15
Ронни, Я имел ввиду ,что кода к примеру в меню на Главной кликаю
на кнопку "фильмы",страничка меняется, и уже на странице фильмы -кнопка "фильмы" получается фиксированной. И далее. Там программа не меняеся? Или так всё и задумано?
01	<!DOCTYPE HTML>
02	 
03	<html>
04	 
05	<head>
06	  <title>Untitled</title>
07	  <meta charset="utf-8">
08	<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
09	<style type="text/css">
10	h1 {
11	  font-family:Verdana, Arial, Helvetica, sans-serif;
12	  font-size:13px;
13	  font-weight:bold;
14	  margin:0;
15	  padding:0;}
16	 
17	 hr {
18	  border:none;
19	  border-top:1px solid #CCCCCC;
20	  height:1px;
21	  margin-bottom:25px;}
22	 
23	 ul {
24	  list-style: none;
25	  margin: 0;
26	  padding: 0;}
27	 
28	 img {border: none;}
29	 
30	 #menu {
31	  width: 168px;
32	  margin: 0px;
33	  border-style: solid solid none solid;
34	  border-color: #000;
35	  border-width: 1px;
36	  position: relative;
37	  top: 700px;
38	  }
39	 
40	 #menu li a {
41	  height: 32px;
42	  voice-family: inherit;
43	  height: 24px;
44	  text-decoration: none;}
45	 
46	 #menu li a:link, #menu li a:visited {
47	  color: #9cff00;
48	  display: block;
49	  background: url(http://wallaby.ucoz.ru/_ph/1/2/631039619.gif);
50	  padding: 8px 0 0 10px;}
51	 
52	 #menu li a:hover {
53	  color: #9cff00;
54	  background: url(http://wallaby.ucoz.ru/_ph/1/2/138374785.gif) 0 -32px;
55	  padding: 8px 0 0 10px;}
56	 
57	 
58	#menu span.button_fixed{ color:#FF0000; }
59	 body{
60	   height: 1000px;
61	 }
62	 
63	 
64	</style>
65	</head>
66	 
67	<body>
68	<div id="menu">
69	 <ul>
70	 <li><a href="#"><span style="color:fff"><b>Главная</b></span></a></li>
71	 <li><a href="#"><span style="color:fff"><b>Форум</b></span></a></li>
72	 <li><a href="#"><span style="color:fff"><b>Галерея</b></span></a></li>
73	 <li><a href="#"><span style="color:fff"><b>ClanWars</b></span></a></li>
74	 <li><a href="#"><span style="color:fff"><b>Фильмы</b></span></a></li>
75	 </ul>
76	 </div>
77	 <script>
78	 $('#menu a span').click(function(event){
79	      $('#menu').find('.button_fixed').removeClass('button_fixed')
80	      $(this).addClass('button_fixed')
81	      return false;
82	  })
83	 
84	 </script>
85	</body>
86	 
87	</html>

Setta 29.07.2013 23:19
Ну <li><a href="#">... разумеется настоящая ссылка

рони 30.07.2013 01:24
Setta,
вам же дали ссылку в 15 посте сходите по ней и выберите нужный вам вариант. там их уже второй десяток.

Setta 31.07.2013 17:26
СПАСИЬО. СДЕЛАЛ.СОВЕРШЕННО НИТАК ТОЛЬКО КАГДА ПЕРЕЙДЕШЬ НА ДРУГУЮ СТРАНИЧКУ САЙТА, ФИКСАЦИИ НИ КНОПКИ НИ ТЕКСТА НА НЕЙ НЕ ПОЛУЧАЕТСЯ ВСЁ ОСТАЁТСЯ В НОЛЬ-ВАРИАНТЕ :)

рони 31.07.2013 17:48
Setta,
какой код?


Часовой пояс GMT +3, время: 18:39.