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

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)

ОлегА! Кнопки в 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')
	})

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

Цитата:

Сообщение от 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>

РОНИ! Спасибо! Все переключается как и хотел,но когда вместо ссылки как в примере

<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:

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

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

Цитата:

Сообщение от рони (Сообщение 263328)

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

а ты попробуй, а потом говори спасет или нет.

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

по теме

Цитата:

2.Если обработчик назначен через on..., то return false из обработчика отменяет действие браузера:
1 element.onclick = function(event) {
2 ...
3 return false;
4 }
Такой способ проще, но не будет работать, если обработчик назначен через addEventListener/attachEvent

<!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>

рони, извиняюсь за упрямство, есть косяк ;)

Ронни, Я имел ввиду ,что кода к примеру в меню на Главной кликаю
на кнопку "фильмы",страничка меняется, и уже на странице фильмы -кнопка "фильмы" получается фиксированной. И далее. Там программа не меняеся? Или так всё и задумано?

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>

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