Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 01.04.2013, 12:19
Новичок на форуме
Отправить личное сообщение для veetal Посмотреть профиль Найти все сообщения от veetal
 
Регистрация: 01.04.2013
Сообщений: 2

открытие и скрытие 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 клика ---------->
Пожалуйста помогите решить задачу !!!
Ответить с цитированием
  #2 (permalink)  
Старый 01.04.2013, 13:41
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

Сообщение от veetal
Как сделать что бы, при клике по иной ссылке скрывался отображающийся блок и открылся соответствующей нажатой ссылке блок в один клик?
Просто дописать закрытие всех, таких блоков...
Ответить с цитированием
  #3 (permalink)  
Старый 01.04.2013, 13:52
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

Сообщение от 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>
Ответить с цитированием
  #4 (permalink)  
Старый 01.04.2013, 15:01
Новичок на форуме
Отправить личное сообщение для veetal Посмотреть профиль Найти все сообщения от veetal
 
Регистрация: 01.04.2013
Сообщений: 2

Это то что нужно огромное спасибо !!!!!!!!!! А про говнокод сам знаю учусь понемногу...
Ответить с цитированием
  #5 (permalink)  
Старый 01.04.2013, 15:44
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

Сообщение от veetal
учусь понемногу
Нужно сразу правильно учиться.
Ответить с цитированием
  #6 (permalink)  
Старый 09.02.2014, 21:36
Новичок на форуме
Отправить личное сообщение для Kasper28 Посмотреть профиль Найти все сообщения от Kasper28
 
Регистрация: 09.02.2014
Сообщений: 9

Подскажите, как добавить дополнительную кнопку "Скрыть" в раскрывающийся блок, чтобы он скрывался не только при открытии другого блока, но и при нажатии на кнопу "Скрыть"?
Ответить с цитированием
  #7 (permalink)  
Старый 10.02.2014, 08:43
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

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

Сообщение от Kasper28
чтобы он скрывался не только при открытии другого блока, но и при нажатии на кнопу "Скрыть"?
"Повесить" на кнопку обработчик, который и будет выполнять это действо...
Ответить с цитированием
  #8 (permalink)  
Старый 22.08.2015, 08:37
Новичок на форуме
Отправить личное сообщение для Denis.R Посмотреть профиль Найти все сообщения от Denis.R
 
Регистрация: 22.08.2015
Сообщений: 1

Друзья, подскажите пожалуйста..
Что нужно в этом примере изменить для того, что бы "подключаемый блок 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>
Ответить с цитированием
  #9 (permalink)  
Старый 25.08.2015, 16:07
Профессор
Отправить личное сообщение для Mess4me Посмотреть профиль Найти все сообщения от Mess4me
 
Регистрация: 03.11.2014
Сообщений: 263

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
При клике ссылки, открыть DIV блок, и при клике ещё раз, закрыть его Simon Общие вопросы Javascript 59 28.05.2017 17:31
Выделение строки <select> при выборе checkbox DarkMaster13 Общие вопросы Javascript 4 14.04.2014 03:30
Не срабатывает hover при использовании в div IE 6.0 AlexMak (X)HTML/CSS 5 14.05.2009 18:26
Отрыть DIV блок при переходе с другой страницы BuTbka Общие вопросы Javascript 7 08.04.2009 22:59
раскрывать/скрывать <td> при выборе определенного элемента списка zip Элементы интерфейса 2 19.01.2009 13:58