页面上的多个选项卡组-CSS/jQuery

我知道以前有人问过这个话题，但是浏览这些帖子并不是我想要的，所以请耐心等待

首先是我的小jQuery（工作完美无瑕）

还有我的基本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>

表4
表5
表6

当然，如果我在页面上放置多个选项卡部分，每次单击一个选项卡时，所有选项卡的内容都将“隐藏”，我需要使每个选项卡部分独立运行

我的问题是我想避免使用ID路径，理想情况下，我可以将JS直接放入模板中，每当有人需要一个选项卡区域时，他们就可以粘贴HTML，也许可以向UL添加一个ID并填充空白

标签和它们的内容将被其他不太暴躁的人放进去，所以如果我能避免让他们使用JS，生活将是美好的

我曾考虑过使用过滤器、字符串替换、子元素（将div放入LIs？）等。但在没有我的ducky float潜水到一个陌生的海洋之前，我认为这里的一位专业人士可以给我一个提示，并为我指明正确的方向。js/jQuery从来都不是我最喜欢的^^^

---

非常感谢

这应该可以做到：

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>

---

我相信这是可以优化的；）

我不确定优化，但它正是我想要的！谢谢，你是救命恩人！

<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>

$(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;
    });
});