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 затем снова развернуть и показать новый блок таба. |
вроде бы и все хорошо - по клику разворачивается и меняется контент, но одна мысль мне не дает покоя. Как же отследить повторный клик на активном табе что бы свернуть его когда пользователю это будет нужно ?..
|
У меня получилось этого добиться добавляя "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. |