Javascript.RU

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

Не меняется класс div с помощью jQuery
Обучаюсь jQuery не зная java script'a. Вообщем то большая часть понятна, Но решил просто по экспереметрировать и наткнулся на проблему:
простая задача, есть DIv в нем пара ссылок, при нажатии на ссылку меняется класс div'a. HTML с "скриптом" тут:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt" rel="nofollow">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt</a>;
<html xmlns="<a href="http://www.w3.org/1999/xhtml"&gt" rel="nofollow">http://www.w3.org/1999/xhtml"&gt</a>;
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Тест-тест</title>
<script type="text/javascript" src="jquery.js"></script>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>

<script type="text/javascript">
$(document).ready(function(){
$(".blog").click(function(){
$("#menu3").toggleClass("menu4");
});

});
</script>

<body>
<div id="menu3">
<a href="#" class="blog">Блог</a>
<a href="#" class="Portfolio">Портфолио</a>
</div>
<div id="content"></div>
</body>
</html>



Таблица стилей такова:

body {background-color:#999; margin: 0px; padding: 0px;}
#menu3 { background-color:#0C6;}
#menu4 {background-color:#FF3;}


При нажатии на ссылку блог - фон не меняет цвет
Ответить с цитированием
  #2 (permalink)  
Старый 07.10.2011, 07:12
sinistral
Посмотреть профиль Найти все сообщения от melky
 
Регистрация: 28.03.2011
Сообщений: 5,418

селектор в css написан через ID, а не класс
Ответить с цитированием
  #3 (permalink)  
Старый 07.10.2011, 07:27
Аватар для smallredstone
Новичок на форуме
Отправить личное сообщение для smallredstone Посмотреть профиль Найти все сообщения от smallredstone
 
Регистрация: 04.10.2011
Сообщений: 9

Похоже вместо #menu4 должно быть .menu4

Но цвет фона все-равно не изменится, поскольку цвет задан еще и в id, а стиль id применяется после стиля class и перезаписывает его
Ответить с цитированием
  #4 (permalink)  
Старый 07.10.2011, 08:29
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,219

Сообщение от smallredstone
стиль id применяется после стиля class и перезаписывает его
Правильнее сказать "имеет больший приоритет"...

Сообщение от Mniako
#menu3 { background-color:#0C6;}
#menu4 {background-color:#FF3;}
Поможет такой вариант...

#menu3 { background-color:#0C6;}
#menu3 .menu4 {background-color:#FF3;}

Последний раз редактировалось ksa, 07.10.2011 в 08:31.
Ответить с цитированием
  #5 (permalink)  
Старый 07.10.2011, 17:40
Интересующийся
Отправить личное сообщение для Mniako Посмотреть профиль Найти все сообщения от Mniako
 
Регистрация: 07.10.2011
Сообщений: 10

Сообщение от ksa Посмотреть сообщение
Правильнее сказать "имеет больший приоритет"...


Поможет такой вариант...

#menu3 { background-color:#0C6;}
#menu3 .menu4 {background-color:#FF3;}
такой вариант не помог, + я не понимаю кто имеет больший приоритет перед menu4 ? menu3 ? разве мы не "переключили" стиль ? если так то старый стиль никакого отношения не должен иметь к новому, или мы "добавили новый стиль не удаляя старый ?" Заменил ID на class везде, тоже не помогло:

<script type="text/javascript">
$(document).ready(function(){
								$(".blog").click(function(){
									$(".menu3").toggleclass(".menu4");
								});
	
	
});
</script>



<body>
<div class="menu3">
<a href="#" class="blog">Блог</a>
<a href="#" class="Portfolio">Портфолио</a>
</div>
<div id="content"></div>
</body>
</html>


.menu3 { background-color:#0C6;}
.menu4 {background-color:#FF3;}

Последний раз редактировалось Mniako, 07.10.2011 в 17:48.
Ответить с цитированием
  #6 (permalink)  
Старый 07.10.2011, 18:36
Интересующийся
Отправить личное сообщение для Mniako Посмотреть профиль Найти все сообщения от Mniako
 
Регистрация: 07.10.2011
Сообщений: 10

Вообщем решил проблему сам, мб кому то и интересно будет:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Тест-тест</title>
<script type="text/javascript" src="jquery.js"></script>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>

<script type="text/javascript">
	$(document).ready(function(){
		$(".button").click(function(){
			$(".box").toggleClass("active"); return false;
		});
	});
</script>



<body>
<div class="box">
<a href="#" class="button">Change color</a>
</div>
</body>
</html>


body {background-color:#999; margin: 0px; padding: 0px;}
.box {margin-top: 100px; margin-left: 100px; width: 300px; height: 200px; background-color: #906;}
.button {color:#333; text-decoration:none; margin-top: 15px; margin-left: 15px;}
.active {background-color:#0F3;}


Не хватало Return false
Ответить с цитированием
  #7 (permalink)  
Старый 08.10.2011, 09:17
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,219

Сообщение от Mniako
я не понимаю кто имеет больший приоритет
Книжки по ЦСС всё подробно про это объясняют...

Сообщение от Mniako
такой вариант не помог
Тому огрызку кода, что ты привёл должен был помочь... Что там у тебя в действительности я не знаю...
Ответить с цитированием
  #8 (permalink)  
Старый 08.10.2011, 12:19
Интересующийся
Отправить личное сообщение для Mniako Посмотреть профиль Найти все сообщения от Mniako
 
Регистрация: 07.10.2011
Сообщений: 10

В действительности у меня меню которое уходит в сторону и в центре появляется контент, вобщем то работает
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
jquery выбрать div с помощью ссылки в нем nioxkzn jQuery 2 02.04.2011 00:40
Проблема с load в div и импортом стороннего кода с помощью javascript 1quick1 Events/DOM/Window 9 04.02.2011 13:16
Из textarea в div jquery BorisBritva Events/DOM/Window 5 22.11.2010 19:08
Jquery немогу установить класс! shureg Общие вопросы Javascript 4 26.10.2010 14:37
Как скруглить углы у картинки с помощью JQuery askel jQuery 5 08.05.2010 22:33