javascript - 一页上有多个 jQuery 选项卡...？

Question

我想要做的就是在同一页面上有多个选项卡区域，并使用 JS 中的一个类来处理所有这些区域。我不想手动向 JS 添加单独的 ID 来激活选项卡。

这是一个 fiddle : http://jsfiddle.net/V7a2C/2/

这是我的代码:

HTML

<aside id="0" class="widget tabbed popular-articles">
    <header>
        <h1 class="widget-title">Popular Articles 1</h1>
        <a href="#" class="more">More</a>

        <ul class="tab-nav">
            <li class="active"><a href="#tab1">Read</a></li>
            <li><a href="#tab2">Emailed</a></li>
        </ul>
    </header>

    <div class="content">
        <div id="tab1" class="tab read first active">
            <ol>
                <li>
                    <a href="#">The IT Talent Problem</a>
                </li>
                <li>
                    <a href="#">Finance Leaders Bemoan Talent Shortage</a>
                </li>
                <li>
                    <a href="#">A Powerful Stock-Price Predictor</a>
                </li>
                <li>
                    <a href="#">The Great Pension Derisking</a>
                </li>
                <li>
                    <a href="#">It's All in the Game</a>
                </li>
            </ol>
        </div>
        <div id="tab2" class="tab emailed second">
            <ol>
                <li>
                    <a href="#">Special Report: Benchmarking Tech</a>
                </li>
                <li>
                    <a href="#">The IT Talent Problem</a>
                </li>
                <li>
                    <a href="#">The Great Pension Derisking</a>
                </li>
                <li>
                    <a href="#">A Powerful Stock-Price Predictor</a>
                </li>
                <li>
                    <a href="#">It's All in the Game</a>
                </li>
            </ol>
        </div>
    </div>
</aside>
<aside id="1" class="widget tabbed popular-articles">
    <header>
        <h1 class="widget-title">Popular Articles 2</h1>
        <a href="#" class="more">More</a>

        <ul class="tab-nav">
            <li class="active"><a href="#tab1">Read</a></li>
            <li><a href="#tab2">Emailed</a></li>
        </ul>
    </header>

    <div class="content">
        <div id="tab1b" class="tab read first active">
            <ol>
                <li>
                    <a href="#">The IT Talent Problem</a>
                </li>
                <li>
                    <a href="#">Finance Leaders Bemoan Talent Shortage</a>
                </li>
                <li>
                    <a href="#">A Powerful Stock-Price Predictor</a>
                </li>
                <li>
                    <a href="#">The Great Pension Derisking</a>
                </li>
                <li>
                    <a href="#">It's All in the Game</a>
                </li>
            </ol>
        </div>
        <div id="tab2b" class="tab emailed second">
            <ol>
                <li>
                    <a href="#">Special Report: Benchmarking Tech</a>
                </li>
                <li>
                    <a href="#">The IT Talent Problem</a>
                </li>
                <li>
                    <a href="#">The Great Pension Derisking</a>
                </li>
                <li>
                    <a href="#">A Powerful Stock-Price Predictor</a>
                </li>
                <li>
                    <a href="#">It's All in the Game</a>
                </li>
            </ol>
        </div>
    </div>
</aside>

JS

$('.tab-nav li a').click(function(){

    var currentTab = $(this).attr('href');
    var tabs = $(this).parents('aside');

    $(this).parent('li').siblings().removeClass('active');
    $(this).parent('li').addClass('active');
    tabs.find('.tab').removeClass('active');
    $(currentTab).addClass('active');
    console.log(tabs.find('.tab'));
    var tabs = $(this).parents('aside');
    return false;

});

Answer 1

假设链接和选项卡的顺序相同，因为此代码使用单击的标题的索引来确定要显示的选项卡的索引:

$('.tab-nav li a').click(function(){

    var that = $(this); //cache when you can
    var tabIndex = that.parent().index();
    var tabs = that.parents('aside').find('.tab');

    that.parent('li').siblings().removeClass('active');
    that.parent('li').addClass('active');
    tabs.removeClass('active');
    tabs.eq(tabIndex).addClass('active');
    return false;

});

或者，您可以运行一些 JavaScript 来预先提供与 ID 匹配的所有选项卡和标题，或者仅使用外部库，例如 jQuery-UI 选项卡。