1

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

这是一个小提琴：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;

});
4

2 回答 2

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 选项卡。

于 2013-09-07T00:23:03.753 回答
0

您在为第二个选项卡提供值时犯了一个小错误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>

演示：小提琴

于 2013-09-07T00:14:02.560 回答