Смена css по клику

stars · February 17, 2010

В общем проблема такая у меня есть 4 слоя на каждом слое банер вот картинка для наглядности:

http://s001.radikal.ru/i194/1002/91/3243c47bdc5e.jpg

Допустим изначально показывается красный div, а уже по клику на голубой он выходит в перед.

То есть в идеале бы сделать для каждого слоя свой z-index

Красному z-index: 4

Зеленому z-index: 3

Голубому z-index: 2

Черному z-index: 1

при клике скажем на голубой надо чтобы индексы стали

Красному z-index: 2

Зеленому z-index: 3

Голубому z-index: 4

Черному z-index: 1

далее кликаем на черный становиться

Красному z-index: 1

Зеленому z-index: 2

Голубому z-index: 3

Черному z-index: 4

Я понимаю что нужно написать скрипт java div'y добавить параметр onclick но в джаве я не селен...

P.S. в пме какие то сообщения что у меня типо вирусы и надо провериться на неком протект-лаб.нет это спам?

Edited February 17, 2010 by stars

psywalker · February 17, 2010

1) JS тебе в помощь

2) Да, это спам, не обращай внимание

stars · February 17, 2010

1) JS тебе в помощь
2) Да, это спам, не обращай внимание

ну так я и надеялся что ктонить мне подкинет скриптик... ибо вчем в чем а в jave не понимаю почти не чего (

psywalker · February 17, 2010

ну так я и надеялся что ктонить мне подкинет скриптик... ибо вчем в чем а в jave не понимаю почти не чего (

1) А о java речь вообще не идёт, я говорил про javascript

2) Насчёт скриптика я ради интереса попробую позже сделать, если что получится, то покажу.

Лови, говори косяки

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Z-index</title>
<style type="text/css">
	*{ margin: 0; padding:0}
	body { margin: 50px;}
	#wrap { 
		width: 300px; 
		height: 100px; 
		border: 1px solid #000;
	}
		div { float: left; height: 100px; width: 20px;}

		#black { background: black;}
		#blue { background: blue;}
		#green { background: green;}
		#red { background: red;}

		div.z { width: 240px;}


</style>

</head>

<body>

	<div id="wrap">
		<div id="black" onclick="color(this);"></div>
		<div id="blue"  onclick="color(this);"></div>
		<div id="green"  onclick="color(this);"></div>
		<div id="red"  class="z" onclick="color(this);"></div>
	</div>

<script>

	function color(node){
		var wrap = document.getElementById('wrap')
		var wrapDiv = wrap.getElementsByTagName('div')

		for(var i = 0; i<wrapDiv.length;i++) wrapDiv.item(i).className = ''

		node.className = 'z'
	}

</script>
</body>
</html>

stars · February 17, 2010

Сама структура выполнена на 5, но когда туда внутрь чегонить кладешь то при закрытии оно вылезает )))

http://s001.radikal.ru/i194/1002/a2/4e1143056e63.jpg

Можно сделать в нутри дивов еще одни дивы и чтобы когда основной закрыт внутренний имел бы display: none; ?

<div>

</div>

psywalker · February 17, 2010

Сама структура выполнена на 5, но когда туда внутрь чегонить кладешь то при закрытии оно вылезает )))
http://s001.radikal.ru/i194/1002/a2/4e1143056e63.jpg
Можно сделать в нутри дивов еще одни дивы и чтобы когда основной закрыт внутренний имел бы display: none; ?
<div id="black" onclick="color(this);">
<div>
</div>
</div>

1) Т.е. погоди, я не понял. Как понять, если основной закрыт? Основной - это какой?

2) А внутренний - это какой?

stars · February 17, 2010

	<div id="wrap">
		<div id="black" onclick="color(this);">	 <==== Основной1
				  <div>										 <==== Внутренний1
				  </div>
		</div>
		<div id="blue"  onclick="color(this);">	 <==== Основной2
				  <div>										 <==== Внутренний2
				  </div>
		</div>
		<div id="green"  onclick="color(this);">	 <==== Основной3
				  <div>										 <==== Внутренний3
				  </div>
		</div>
		<div id="red"  class="z" onclick="color(this);">	 <==== Основной4
				  <div>										 <==== Внутренний4
				  </div>
		</div>
	</div>

Ну и следовательно если у нас сверху красный див то Внутренний1 Внутренний2 Внутренний3 должны иметь displey none а Внутренний4 не должен иметь этого самого displey вообще...

Edited February 17, 2010 by stars

psywalker · February 17, 2010

Аа, я понял, ну это уже сложнее, тада позже попробую, но не обещаю

stars · February 17, 2010

кстати display у активного можно не удалять а просто ставить displey: block;

Edited February 17, 2010 by stars

psywalker · February 17, 2010

Проверяй, говори косяки

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Z-index</title>
<style type="text/css">
	*{ margin: 0; padding:0}
	body { margin: 50px;}
	#wrap { 
		width: 300px; 
		height: 100px; 
		border: 1px solid #000;
	}
		div { float: left; height: 100px; width: 20px;}
		div div div{ 

			height: 96px;
			width: 70px;
			background: yellow; 
			display: none;
			border: 2px dotted #F09;
		}

		#black { background: black;}
		#blue { background: blue;}
		#green { background: green;}
		#red { background: red;}

		div.z { width: 240px;}
		div.b { display: block;}


</style>

</head>

<body>

	<div id="wrap">
		<div id="black" onclick="color(this);"><div>Баннер-1 Black</div></div>
		<div id="blue"  onclick="color(this);"><div>Баннер-2 Blue</div></div>
		<div id="green"  onclick="color(this);"><div>Баннер-3 Green</div></div>
		<div id="red"  class="z" onclick="color(this);"><div class="b">Баннер-4 Red</div></div>
	</div>

<script>

	function color(node){
		var wrap = document.getElementById('wrap')

		var wrapDiv = wrap.getElementsByTagName('div')
		var nodeDiv = node.getElementsByTagName('div').item(0)

		for(var i = 0; i<wrapDiv.length;i++){ 
			wrapDiv.item(i).className = ''
			nodeDiv.className = 'b'
		}

		node.className = 'z'
	}

</script>
</body>
</html>

stars · February 18, 2010

Все супер большое человеческое спасибо, правда название "Z-index" явно не в тему ))) да и сам способ менять слоям Z-index не есть гуд ибо в данном случаи грузится только открытый банер а если бы был Z-index грузились бы все...

psywalker · February 18, 2010

Все супер большое человеческое спасибо, правда название "Z-index" явно не в тему ))) да и сам способ менять слоям Z-index не есть гуд ибо в данном случаи грузится только открытый банер а если бы был Z-index грузились бы все...

Ну тут уже дружище, дело за тобой. В ЦСС то ты разбираешься я думаю, а значит свойства сам какие нужно понапишешь в классы.

Sign In

Смена css по клику

Question

Link to comment

Share on other sites

11 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information