Помогите сделать вложенные вкладки на jquery

[verfaa]

Всем привет, делаю вкладки на jQuery и нужно в одной из вкладок сделать ещё несколько вкладок, но эти вложенные вкладки напроч отказываются у меня работать. Чтобы не выносить сюда кучу кода, я закинул пример на отдельный сайт

Для просмотра ссылки Войди или Зарегистрируйся
Подскажите пожалуйста кто знает, что поправить, чтобы вложенные вкладки photos audio и video во вкладке Multimedia нормально заработали. Всем спасибо за ответы

 

[dino]

Для просмотра ссылки Войди или Зарегистрируйся
хотя это и так у вас используется... жалко нельзя удалять сообщения.... ща повнимательнее поглядим....
ага...
$("ul.tabs li").removeClass("active"); //Remove any "active" class
получается что при клике на вложенных вкладках деактивируется родительский блок... поэтому все исчезает... попробуйте сменить название класса для вложенных вкладок и дописать функцию под них...

 

[dino]

приблизительно так:

//On Click Event
$("ul.tabs li").click(function() {
 
$("ul.tabs li").removeClass("active"); //Remove any "active" class
$(this).addClass("active"); //Add "active" class to selected tab
$(".tab_content").hide(); //Hide all tab content
 
var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
$(activeTab).fadeIn(); //Fade in the active ID content
return false;
});
 
//On Click child tabs Event
$("ul.tabs_child li").click(function() { $("ul.tabs_child li").removeClass("active"); //Remove any "active" class
$(this).addClass("active"); //Add "active" class to selected tab
$(".tab_content_child").hide(); //Hide all tab content
var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
$(activeTab).fadeIn(); //Fade in the active ID content return false;
});
...............................
  <div id="tab2" class="tab_content">
                          <!-- my photos-->
 
                   
                      <ul class="tabs_child">
                            <li><a href="#tab4">photos</a></li>
                            <li><a href="#tab5">audio</a></li>
                          <li><a href="#tab6">video</a></li>
                        </ul>
             
                    <div class="tab_container_child">
                            <div id="tab4" class="tab_content">
                            tab4  content                 
                            </div>                 
                            <div id="tab5" class="tab_content">
                          tab5  content
                            </div>
                                  <div id="tab6" class="tab_content">
                          tab6  content
                            </div>
                        </div>

P.S. рабочий вариант: Для просмотра ссылки Войди или Зарегистрируйся

 

[verfaa]

Поправил код, следуя рекоммендациям dino, теперь проблема в том. что когда загружаешь страницу и переходишь на вкладку Multimedia во вкладке photos загружается контент сразу из 3-х вложенных вкладок:

tab4 content
tab5 content
tab6 content

Это скорее всего происходит из-за того, что когда переходишь на вкладку Multimedia вкладка photos не активна. Как сделать так, чтобы она была активна?

И еще, когда кликаю по вложенным вкладкам photos audio и video в конец URL страницы добавляются #tab4 #tab5 #tab6 В принципе они не то чтобы мешают, но если можно обойтись без того чтобы они добавлялись в конец URL поскажите как
И почему, если кликаю по обычным вкладкам, #tab1 #tab2 #tab3 не появляются? Всем спасибо за ответы.

Сама страничка с примером, как и прежде тут Для просмотра ссылки Войди или Зарегистрируйся

 

[dino]

А чего бы просто не скопипастить код моего рабочего варианта?
Так должно быть:
$(document).ready(function() {

//When page loads...
$(".tab_content, .tab_content _child").hide(); //Hide all content
......

 

[scott2to]

Это скорее всего происходит из-за того, что когда переходишь на вкладку Multimedia вкладка photos не активна. Как сделать так, чтобы она была активна?

Просто сделай все ненужные блокни display:none, а нужный, который изначально нужно показать пусть будет видимым.

А что за вкладки используешь? Самопис?

 

[AlexMist]

Вот написал, если учишься, то должен разобраться =) Для просмотра ссылки Войди или Зарегистрируйся
Главное обрабатывать события в контексте. Там JS код которому вообще все равно на вложенность вкладок и на их количество.

$(document).ready(function () {
    $("div.tab_content").hide();
    $("div.tab_container div.tab_content:first-child").show();
    $("ul.tabs li:first").addClass("active");
        $('ul.tabs > li').click(function () {
            if (!($(this).hasClass('active'))) {
                var thisLi = $(this);
                var numLi = thisLi.index();
                thisLi.addClass('active').siblings().removeClass('active');
                thisLi.parent().next().children('div').hide().eq(numLi).show();
            }
    });
});

 

[verfaa]

А что за вкладки используешь? Самопис?

Нет, вкладки забрал из dating-шаблона templatemonster

 

[shaen]

$('#tabs').delegate('li:not(.active)', 'click', function(){ $(this).addClass('active').siblings().removeClass('active').parents('div.page-body').find('div.tabs-box').hide().eq($(this).index()).fadeIn(150); });

<div class="page-body">
<div class="tabs clear-after">
<ul id="tabs">
<li class="active"><a>Общее</a></li>
<li class=""><a>Дополнительно</a></li>
</ul>
</div>
<div class="tabs-box visible">
....
</div>
<div class="tabs-box">
..
<div>
</div>
.tabs-box { display: none; }
.tabs-box.visible { display: block; }