Несколько групп вкладок на странице - CSS/jQuery

Я знаю, что эту тему уже задавали, но просмотр сообщений не совсем то, что я ищу, поэтому, пожалуйста, потерпите меня на минутку.

сначала вот мой маленький jQuery (работает без нареканий)

$(document).ready(function(){
    $(".tabs li").click(function() {
        $(".tab-content").hide();
        var selected_tab = $(this).find("a").attr("href");
        $(selected_tab).fadeIn();
        $(".tabs li").removeClass('current');
        $(this).addClass("current");
        return false;
    });
});

И мой основной HTML

<ul class="tabs">
    <li class="active"><a href="#tab4">Tab 4</a></li>
    <li><a href="#tab5"><div class="alert-icon">Tab 5</div></a></li>
    <li><a href="#tab6"><div class="printer-icon">Tab 6</div></a></li>
</ul>

 <div id="tab4" class="tab-content">Tab 4</div>
 <div id="tab5" class="tab-content">Tab 5 </div>
 <div id="tab6" class="tab-content">Tab 6 </div>

Естественно, если я добавлю более одной вкладки на страницу, при каждом нажатии вкладки содержимое всех вкладок будет "скрываться", и мне нужно заставить каждый раздел с вкладками вести себя независимо.

Моя проблема в том, что я хочу избежать маршрутизации идентификатора, в идеале я могу поместить JS прямо в шаблон, и каждый раз, когда кому-то нужна область с вкладками, он может просто вставить HTML, возможно, добавить идентификатор в UL и заполнить пробелы.

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

Я думал об игре с фильтрами, заменой строк, дочерними элементами (поместите div в LI?) И т. Д., Но перед тем, как погрузиться в незнакомый океан без моего плавучего поплавка, я подумал, что один из профессионалов может дать мне подсказку и указать мне на правильное направление. JS / JQuery никогда не был моим любимым ^^.

Большое спасибо!

1 ответ

Решение

Это должно сделать свое дело: http://jsfiddle.net/BLGUW/

HTML:

<div class="tabs">
        <ul>
            <li class="active"><a href="#tab4">Tab 4</a></li>
        <li><a href="#tab5"><div class="alert-icon">Tab 5</div></a></li>
        <li><a href="#tab6"><div class="printer-icon">Tab 6</div></a></li>
    </ul>
    <div id="tab4" class="tab-content">Tab 4</div>
    <div id="tab5" class="tab-content">Tab 5 </div>
    <div id="tab6" class="tab-content">Tab 6 </div>
</div>

<div class="tabs">
    <ul>
    <li class="active"><a href="#tab40">Tab 4</a></li>
    <li><a href="#tab50"><div class="alert-icon">Tab 5</div></a></li>
    <li><a href="#tab60"><div class="printer-icon">Tab 6</div></a></li>
    </ul>
    <div id="tab40" class="tab-content">Tab 4</div>
    <div id="tab50" class="tab-content">Tab 5 </div>
    <div id="tab60" class="tab-content">Tab 6 </div>
</div>

JS

$(document).ready(function(){
    $(".tabs li").click(function() {
        $(this).parent().parent().find(".tab-content").hide();
        var selected_tab = $(this).find("a").attr("href");
        $(selected_tab).fadeIn();
        $(this).parent().find("li").removeClass('current');
        $(this).addClass("current");
        return false;
    });
});

Я уверен, что это можно оптимизировать;)

Другие вопросы по тегам