Question

我知道之前已经问过这个话题，但是查看帖子并不是我想要的，所以请耐心等一下。

首先是我的小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>

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

我的问题是我想避免使用ID路由，理想情况下我可以将JS直接放入模板中，每当有人需要标签区域时，他们只需粘贴HTML，也可以在UL中添加ID并填写空白。

标签及其内容将由其他非常不耐烦的人放入，所以如果我可以避免让他们使用JS，生活将是美好的！

我想过玩过滤器，字符串替换，子元素（将div放在LI中？）等但是在潜入陌生的海洋之前没有我漂亮的浮动之前我认为这里的一个专业人士可以给我一个提示指出我正确的方向。 js / jQuery从来不是我最喜欢的^^。

非常感谢！

Answer 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;
    });
});

我确信这可以优化;）

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

1 个答案: