Форум

veetal · #1 (**permalink**) 01.04.2013, 12:19

Здравствуйте. Помогите разобраться вот с такой задачей. Есть три элемента на выбор(ссылки) каждая из которой открывает и закрывает соответствующий 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 клика ---------->
Пожалуйста помогите решить задачу !!!

ksa · #2 (**permalink**) 01.04.2013, 13:41

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

Как сделать что бы, при клике по иной ссылке скрывался отображающийся блок и открылся соответствующей нажатой ссылке блок в один клик?

Просто дописать закрытие всех, таких блоков...

ksa · #3 (**permalink**) 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 · #4 (**permalink**) 01.04.2013, 15:01

Это то что нужно огромное спасибо !!!!!!!!!! А про говнокод сам знаю

учусь понемногу...

ksa · #5 (**permalink**) 01.04.2013, 15:44

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

учусь понемногу

Нужно сразу правильно учиться.

Kasper28 · #6 (**permalink**) 09.02.2014, 21:36

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

ksa · #7 (**permalink**) 10.02.2014, 08:43

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

как добавить дополнительную кнопку "Скрыть" в раскрывающийся блок

Так же, как и любую другую кнопку, в любой другой ДИВ...

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

чтобы он скрывался не только при открытии другого блока, но и при нажатии на кнопу "Скрыть"?

"Повесить" на кнопку обработчик, который и будет выполнять это действо...

Denis.R · #8 (**permalink**) 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 · #9 (**permalink**) 25.08.2015, 16:07

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

Форум

Справочник

Discord чат

Курсы javascript