Question

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

这是我的代码：

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标签这样的外部库。

Answer 2

在为第二个标签提供href值时出现了一个小错误，它应该是tab1b和tab2b

<header>
    <h1 class="widget-title">Popular Articles 2</h1>
    <a href="#" class="more">More</a>

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

演示：Fiddle

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

2 个答案: