Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   скрыть, развернуть таб по клику (https://javascript.ru/forum/jquery/27358-skryt-razvernut-tab-po-kliku.html)

archcoffe 17.04.2012 04:53

slideToggle(); - почти то же самое но все же :)
Вот и все! :) - нет не все, потому что смущает два номера:
1. Класс в <li> должен совпадать с названием блока таба, ибо не сработает :)
2. Осталось сделать переход к новому табу без сворачивания #main
я попробовал скрыть в диве #main все блоки которые не попадают в условие -
$('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.' + thisClass).fadeOut();
						$('div#ololo').slideToggle();	
					}
					else {
						$('div#main div:not(.' + thisClass + ')' ).hide();
						$(this).addClass('tab-curre');
						$('div.' + thisClass).fadeIn();
						$('div#ololo').slideToggle();
					}
				});

похоже на правду наверно. Последнее что нужно допереть как сделать - при клике на не нажатую ранее ссылку(таб) оставить #main развернутым и отобразить блок не нажатого таба. Или свернуть #main затем снова развернуть и показать новый блок таба.

archcoffe 18.04.2012 22:34

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

archcoffe 19.04.2012 23:52

У меня получилось этого добиться добавляя "active" к классу самих блоков таба.
$(document).ready(function() {
				$('ul.tabse li').css('cursor', 'pointer');
				$('div.d2').hide();
				$('div.d1').hide();
				$('div#ololo').hide();
				$('ul.tabse li').click(function() {
					var thisClass = this.className.slice(0,2);
					if($('ul.tabse li').hasClass('tab-curre')) {
						if($('div#ololo div.' + thisClass).hasClass('active')) {
							$('div#ololo div.' + thisClass ).fadeOut();
							$('ul.tabse li').removeClass('tab-curre');
							$('div#ololo div.' + thisClass).removeClass('active');
							$('div#ololo').slideUp();
						}
						else {
							$('div#ololo div:not(.' + thisClass + ')' ).removeClass('active');
							$('div#ololo div.' + thisClass).addClass('active');
							$('ul.tabse li').removeClass('tab-curre');
							$(this).addClass('tab-curre');
							$('div.' + thisClass).fadeIn();
							$('div#ololo div:not(.' + thisClass + ')' ).hide();
							$('div#ololo').fadeIn(function () {
								$(this).toggle();
								$(this).show(350);
							});
						}
					}
					else {
						$('div#ololo div.' + thisClass).addClass('active');
						$(this).addClass('tab-curre');
						$('div.' + thisClass).fadeIn();
						$('div#ololo').slideDown();
					}
				});
				
			});

Однако потом поговорил с товарищем который что то понимает в этом - он мне по первой показал код в половину меньше этого, ругнулся мол "учи матчасть" и бросил замечание о том что у меня html не валидный.


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