1

私がやりたいのは、同じページに複数のタブ領域を持ち、JS のクラスを使用してそれらすべてを操作することだけです。タブをアクティブにするために、個別の ID を JS に手動で追加する必要はありません。

ここにフィドルがあります： 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

0

href2 番目のタブの値を指定する際に小さな間違いが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 に答える