скрыть, развернуть таб по клику
Хочу понять и научиться:
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();
});
});
|
что значит "повторный"? в jquery есть dblclick то есть двойное нажатие. Насчет повтора не уверен что есть..
|
"повторный" всмысле что - заходишь видишь что все блоки скрыты, кликаешь по ссылке таба - разворачиваеться #main с блоком самого таба, кликаешь по той же ссылке таба - сворачивается #main соответственно с табом. Я так себе сейчас понял что это ближе к toogle() но он будет неправильно работать когда идет клик по соседнему табу.
Потом можно было бы поставить jquery ui там этот вопрос быстро решается через collapsible=true, но этого сейчас не хочу ибо цель не сделать и забыть, а понять что происходит т.е научиться |
ну тогда функция click.
пример:
$("#tabse a").click(function(){
$("#main div[id='" +$(this).closest("li").attr("class") + "']").toggle(...);
});
Вообще есть где-нить живой пример )) посмотреть чтоб? |
если нужно чтобы #main только отрывался - toogle к майну а к нужному div например opacity = 1 через .css();
|
вот пример этих табов http://dimox.name/examples/accessible-tabs-with-jquery/ - я добавил только блок #main и его развертывание, свертывание
а вот по примеру что ты бросил - что в этом коде происходит? - мне понятно что по клику на ссылке в блоке #tabse должны быть найдены все дивы в блоке #main где есть <li> содержащие "class" ? |
Да именно так, когда ты выделил блок который нужно отобразить ставишь ему свойство display:block например и затем открывешь #main
|
этот пример у меня не отработал, я не пойму как его совместить с моим кодом :(
|
Пробую так как ниже, но вопросы остались
$(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();
}
});
});
хочу реализовать переключение между открытыми блоками, думалось проверять видимость блока в начале, - если есть тогда новый код, а если нет тогда код выше? правильно ли? |
<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();
})
|
| Часовой пояс GMT +3, время: 16:42. |