Javascript.RU

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

скрыть, развернуть таб по клику
Хочу понять и научиться:
1. Как тут можно сделать так что бы #main прятался когда идет повторный клик на ту же ссылку, но при этом #main прятался а потом снова разворачивался когда второй клик на другую ссылку.
<ul class="tabse" >
<li class="d1" ><a href="#" >первый</a></li>
<li class="d2" ><a href="#" >второй</a></li>
</ul>
<div id="main">
    <div class="d1">
         <p>текст1</p>
    </div>
    <div class="d2">
        <p>текст2</p>
    </div>
</div>

$(document).ready(function() {
	$('div.d2').hide();
	$('div.d1').hide();
	$('div#main').hide();
	$('ul.tabse li').click(function(){
		var thisClass = this.className.slice(0,2);
		$('div.' + thisClass).fadeOut();
		$('div#main').slideUp();	
		$('div.d1').hide();
		$('div.d2').hide();
		$('ul.tabse li').removeClass('tab-curre');
		$(this).addClass('tab-curre');
		$('div.' + thisClass).delay(250).fadeIn();
		$('div#main').delay(250).slideDown();	
	});
});

Последний раз редактировалось archcoffe, 10.04.2012 в 21:13.
Ответить с цитированием
  #2 (permalink)  
Старый 11.04.2012, 16:24
Аспирант
Отправить личное сообщение для kiff86 Посмотреть профиль Найти все сообщения от kiff86
 
Регистрация: 26.03.2011
Сообщений: 52

что значит "повторный"? в jquery есть dblclick то есть двойное нажатие. Насчет повтора не уверен что есть..
Ответить с цитированием
  #3 (permalink)  
Старый 11.04.2012, 16:49
Аватар для archcoffe
Интересующийся
Отправить личное сообщение для archcoffe Посмотреть профиль Найти все сообщения от archcoffe
 
Регистрация: 10.04.2012
Сообщений: 19

"повторный" всмысле что - заходишь видишь что все блоки скрыты, кликаешь по ссылке таба - разворачиваеться #main с блоком самого таба, кликаешь по той же ссылке таба - сворачивается #main соответственно с табом. Я так себе сейчас понял что это ближе к toogle() но он будет неправильно работать когда идет клик по соседнему табу.
Потом можно было бы поставить jquery ui там этот вопрос быстро решается через collapsible=true, но этого сейчас не хочу ибо цель не сделать и забыть, а понять что происходит т.е научиться
Ответить с цитированием
  #4 (permalink)  
Старый 11.04.2012, 17:32
Аспирант
Отправить личное сообщение для kiff86 Посмотреть профиль Найти все сообщения от kiff86
 
Регистрация: 26.03.2011
Сообщений: 52

ну тогда функция click.
пример:
$("#tabse a").click(function(){
  $("#main div[id='" +$(this).closest("li").attr("class") + "']").toggle(...);
});


Вообще есть где-нить живой пример )) посмотреть чтоб?
Ответить с цитированием
  #5 (permalink)  
Старый 11.04.2012, 17:33
Аспирант
Отправить личное сообщение для kiff86 Посмотреть профиль Найти все сообщения от kiff86
 
Регистрация: 26.03.2011
Сообщений: 52

если нужно чтобы #main только отрывался - toogle к майну а к нужному div например opacity = 1 через .css();
Ответить с цитированием
  #6 (permalink)  
Старый 11.04.2012, 18:39
Аватар для archcoffe
Интересующийся
Отправить личное сообщение для archcoffe Посмотреть профиль Найти все сообщения от archcoffe
 
Регистрация: 10.04.2012
Сообщений: 19

вот пример этих табов http://dimox.name/examples/accessible-tabs-with-jquery/ - я добавил только блок #main и его развертывание, свертывание

а вот по примеру что ты бросил - что в этом коде происходит? - мне понятно что по клику на ссылке в блоке #tabse должны быть найдены все дивы в блоке #main где есть <li> содержащие "class" ?

Последний раз редактировалось archcoffe, 11.04.2012 в 19:14.
Ответить с цитированием
  #7 (permalink)  
Старый 11.04.2012, 19:48
Аспирант
Отправить личное сообщение для kiff86 Посмотреть профиль Найти все сообщения от kiff86
 
Регистрация: 26.03.2011
Сообщений: 52

Да именно так, когда ты выделил блок который нужно отобразить ставишь ему свойство display:block например и затем открывешь #main
Ответить с цитированием
  #8 (permalink)  
Старый 12.04.2012, 11:59
Аватар для archcoffe
Интересующийся
Отправить личное сообщение для archcoffe Посмотреть профиль Найти все сообщения от archcoffe
 
Регистрация: 10.04.2012
Сообщений: 19

этот пример у меня не отработал, я не пойму как его совместить с моим кодом
Ответить с цитированием
  #9 (permalink)  
Старый 16.04.2012, 17:37
Аватар для archcoffe
Интересующийся
Отправить личное сообщение для archcoffe Посмотреть профиль Найти все сообщения от archcoffe
 
Регистрация: 10.04.2012
Сообщений: 19

Пробую так как ниже, но вопросы остались
$(document).ready(function() {
				$('ul.tabse li').css('cursor', 'pointer');
				$('div.d2').hide();
				$('div.d1').hide();
				$('div#main').hide();
			
				$('ul.tabse li').click(function(){
					var thisClass = this.className.slice(0,2);
					if( $('ul.tabse li').hasClass('tab-curre') ) {
                                                // если клик по блоку без активного класса ?
						$('ul.tabse li').removeClass('tab-curre');
						$('div#main').slideUp();	
					}
					else {
                        $('div.' + thisClass).hide();
						$(this).addClass('tab-curre');
						$('div.' + thisClass).fadeIn();
						$('div#main').slideDown();	
					}
				});
			});

хочу реализовать переключение между открытыми блоками, думалось проверять видимость блока в начале, - если есть тогда новый код, а если нет тогда код выше? правильно ли?

Последний раз редактировалось archcoffe, 16.04.2012 в 19:00.
Ответить с цитированием
  #10 (permalink)  
Старый 17.04.2012, 02:48
Новичок на форуме
Отправить личное сообщение для p.latonenkonikita Посмотреть профиль Найти все сообщения от p.latonenkonikita
 
Регистрация: 16.04.2012
Сообщений: 3

<ul class="tabse" >
<li class="d1" ><a href="#" >первый</a></li>
<li class="d2" ><a href="#" >второй</a></li>
</ul>
<div id="main">
    <div class="sld">
         <p>текст1</p>
    </div>
    <div class="sld">
        <p>текст2</p>
    </div>
</div>


$('.sld').click(function(){
   $(this).slideToggle();
})


Вот и все!

а если нужно, что бы открытый закрывался, то вначале закрой все, а нужный разверни:
$('.sld').click(function(){
   $('.sld').hide();
   $(this).slideToggle();
})

Последний раз редактировалось p.latonenkonikita, 17.04.2012 в 02:52.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Скрыть ссылку на js Googert Общие вопросы Javascript 10 21.02.2012 17:29
Меню, выпадающее и сворачивающееся не по hover а по клику adelante jQuery 1 14.01.2011 04:17