Javascript-форум - Не меняется класс div с помощью jQuery

Javascript-форум (https://javascript.ru/forum/)

- jQuery (https://javascript.ru/forum/jquery/)

- - Не меняется класс div с помощью jQuery (https://javascript.ru/forum/jquery/22122-ne-menyaetsya-klass-div-s-pomoshhyu-jquery.html)

Не меняется класс 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;}

При нажатии на ссылку блог - фон не меняет цвет

селектор в css написан через ID, а не класс

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

Но цвет фона все-равно не изменится, поскольку цвет задан еще и в id, а стиль id применяется после стиля class и перезаписывает его

Цитата:

Сообщение от smallredstone

стиль id применяется после стиля class и перезаписывает его

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

Цитата:

Сообщение от Mniako

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

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

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

Цитата:

Сообщение от ksa (Сообщение 130080)

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

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

#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;}

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

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

Цитата:

Сообщение от Mniako

я не понимаю кто имеет больший приоритет

Книжки по ЦСС всё подробно про это объясняют...

Цитата:

Сообщение от Mniako

такой вариант не помог

Тому огрызку кода, что ты привёл должен был помочь... :) Что там у тебя в действительности я не знаю...

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