Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   открытие и скрытие div при выборе другого div (https://javascript.ru/forum/dom-window/36921-otkrytie-i-skrytie-div-pri-vybore-drugogo-div.html)

veetal 01.04.2013 12:19
открытие и скрытие div при выборе другого div
 
Здравствуйте. Помогите разобраться вот с такой задачей. Есть три элемента на выбор(ссылки) каждая из которой открывает и закрывает соответствующий div, это все работает, а вот сам вопрос.
Как сделать что бы, при клике по иной ссылке скрывался отображающийся блок и открылся соответствующей нажатой ссылке блок в один клик?

<ul id='spisok'>
<li><div class='title_komplekt_1'>ссылка_1</div>
<li><div class='title_komplekt_2'>ссылка_2</div>
<li><div class='title_komplekt_3'>ссылка_3</div>
</ul>

<div class="gal1">подключаемый блок 1</div>
<div class="gal1">подключаемый блок 2</div>
<div class="gal1">подключаемый блок 3</div>

<script type="text/javascript">
$(document).ready(function() {

$('.gal1').hide();
$('.gal2').hide();
$('.gal3').hide();


$('.title_komplekt_1').toggle(function(){
$('.gal1').fadeIn(200);

},function(){

$('.gal1').fadeOut(200);

});

$('.title_komplekt_2').toggle(function(){

$('.gal2').fadeIn(200);


},function(){

$('.gal2').fadeOut(200);

});

$('.title_komplekt_3').toggle(function(){

$('.gal3').fadeIn(200);


},function(){

$('.gal3').fadeOut(200);

});
});
</script>


<---------------- скрипт при котором работает в 2 клика ---------->
<script type="text/javascript">
$(document).ready(function() {

$('.gal1').hide();
$('.gal2').hide();
$('.gal3').hide();


$('.title_komplekt_1').toggle(function(){
$('.gal2').fadeOut(200);
$('.gal3').fadeOut(200);
$('.gal1').fadeIn(200);

},function(){

$('.gal1').fadeOut(200);
$('.gal2').fadeOut(200);
$('.gal3').fadeOut(200);

});

$('.title_komplekt_2').toggle(function(){
$('.gal1').fadeOut(200);
$('.gal3').fadeOut(200);
$('.gal2').fadeIn(200);


},function(){
$('.gal1').fadeOut(200);
$('.gal2').fadeOut(200);
$('.gal3').fadeOut(200);

});

$('.title_komplekt_3').toggle(function(){
$('.gal1').fadeOut(200);
$('.gal2').fadeOut(200);
$('.gal3').fadeIn(200);


},function(){
$('.gal1').fadeOut(200);
$('.gal2').fadeOut(200);
$('.gal3').fadeOut(200);
});
});
</script>
<---------------- скрипт при котором работает в 2 клика ---------->
Пожалуйста помогите решить задачу !!! :help:

ksa 01.04.2013 13:41
Цитата:
Сообщение от veetal
Как сделать что бы, при клике по иной ссылке скрывался отображающийся блок и открылся соответствующей нажатой ссылке блок в один клик?
Просто дописать закрытие всех, таких блоков...

ksa 01.04.2013 13:52
Цитата:
Сообщение от veetal
скрипт при котором работает в 2 клика
Что-то у тебя вовсе говнокод какой-то...
Как вариант

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!--
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
#container > div {
	display: none;
}
#spisok > li {
	cursor: pointer;
}
</style>
<script type="text/javascript">
$(document).ready(function (){
	$('#spisok > li').click(function (){
		$('#container > div').hide();
		var i=$(this).data('id');
		$('#d'+i).fadeIn();
	});
});
</script>
</head>
<body>
<ul id='spisok'>
	<li data-id='1'><div class='title_komplekt_1'>ссылка_1</div></li>
	<li data-id='2'><div class='title_komplekt_2'>ссылка_2</div></li>
	<li data-id='3'><div class='title_komplekt_3'>ссылка_3</div></li>
</ul>
<div id='container'>
	<div id='d1' class="gal1">подключаемый блок 1</div>
	<div id='d2' class="gal1">подключаемый блок 2</div>
	<div id='d3' class="gal1">подключаемый блок 3</div>
</div>
</body>
</html>

veetal 01.04.2013 15:01
Это то что нужно огромное спасибо !!!!!!!!!! А про говнокод сам знаю :) учусь понемногу...

ksa 01.04.2013 15:44
Цитата:
Сообщение от veetal
учусь понемногу
Нужно сразу правильно учиться. :)

Kasper28 09.02.2014 21:36
Подскажите, как добавить дополнительную кнопку "Скрыть" в раскрывающийся блок, чтобы он скрывался не только при открытии другого блока, но и при нажатии на кнопу "Скрыть"?

ksa 10.02.2014 08:43
Цитата:
Сообщение от Kasper28
как добавить дополнительную кнопку "Скрыть" в раскрывающийся блок
Так же, как и любую другую кнопку, в любой другой ДИВ...

Цитата:
Сообщение от Kasper28
чтобы он скрывался не только при открытии другого блока, но и при нажатии на кнопу "Скрыть"?
"Повесить" на кнопку обработчик, который и будет выполнять это действо...

Denis.R 22.08.2015 08:37
Друзья, подскажите пожалуйста..
Что нужно в этом примере изменить для того, что бы "подключаемый блок 1" был по умолчанию открыт и скрывался только если подключаем второй блок?

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!--
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
#container > div {
	display: none;
}
#spisok > li {
	cursor: pointer;
}
</style>
<script type="text/javascript">
$(document).ready(function (){
	$('#spisok > li').click(function (){
		$('#container > div').hide();
		var i=$(this).data('id');
		$('#d'+i).fadeIn();
	});
});
</script>
</head>
<body>
<ul id='spisok'>
	<li data-id='1'><div class='title_komplekt_1'>ссылка_1</div></li>
	<li data-id='2'><div class='title_komplekt_2'>ссылка_2</div></li>
</ul>
<div id='container'>
	<div id='d1' class="gal1">подключаемый блок 1</div>
	<div id='d2' class="gal1">подключаемый блок 2</div>
</div>
</body>
</html>

Mess4me 25.08.2015 16:07
Наверное в style добавить
#container div:first-child {
display: block;
}


Часовой пояс GMT +3, время: 10:06.