Форум

Mniako · #1 (**permalink**) 07.10.2011, 01:46

Обучаюсь 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;}

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

melky · #2 (**permalink**) 07.10.2011, 07:12

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

smallredstone · #3 (**permalink**) 07.10.2011, 07:27

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

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

ksa · #4 (**permalink**) 07.10.2011, 08:29

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

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

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

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

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

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

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

Mniako · #5 (**permalink**) 07.10.2011, 17:40

Сообщение от 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 · #6 (**permalink**) 07.10.2011, 18:36

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

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

ksa · #7 (**permalink**) 08.10.2011, 09:17

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

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

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

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

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

Тому огрызку кода, что ты привёл должен был помочь...

Что там у тебя в действительности я не знаю...

Mniako · #8 (**permalink**) 08.10.2011, 12:19

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

Форум

Справочник

Discord чат

Курсы javascript