1

I know this topic has been asked before but looking through the posts isn't quite what I'm looking for so please bear with me for a minute.

first here's my little jQuery (works flawlessly) 

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

And my basic 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>

Naturally if I put more than 1 tab section on the page, every time a tab is clicked the content of all tabs will "hide" and I need to make each tabbed section behave independently.

My problem is I want to avoid going the ID route, ideally I can put the JS right into the template and every time someone needs a tabbed area they can just paste the HTML, maybe add an ID to the UL and fill in the blanks.

Tabs and their content will be put in by other not very tetchy people so if I can avoid having them use JS, life would be wonderful!

I thought about playing with filters, string replaces, child elements (put the divs in the LIs?) etc. but before diving into an unfamiliar ocean without my ducky float I thought one of the pros here can give me a hint and point me in the right direction. js/jQuery was never my favorite ^^.

Thanks a lot!

4

1 回答 1

3

这应该可以解决问题：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;
    });
});

我确信这可以优化；）

于 2013-02-12T16:27:36.060 回答