您的位置: 首页 > IT文章 > jquery兑现tab选项卡

jquery兑现tab选项卡

分类: IT文章 • 2022-05-04 13:35:43

jquery实现tab选项卡

<section class="recommendarticlelist">
    <hgroup class="clearfix">
    <h2>热点推荐</h2>
    <h3>

        <span data-index="0" >婚纱礼服</span>

        <span data-index="1" >婚庆时尚</span>

        <span data-index="2" class="">婚纱礼服</span>

        <span data-index="3" class="">蜜月</span>

        <span data-index="4" class="">蜜月国内</span>

    </h3>
    </hgroup>
    <div class="recommendarticlelist-c">

    <ul data-index="0" class="clearfix">

        <li>
       22
        </li>


    </ul>

    <ul data-index="1" class="clearfix">

        <li>
        333
        </li>

    </ul>

    <ul data-index="2" class="clearfix">

        <li>
        444
        </li>

    </ul>

    <ul data-index="3" class="clearfix">

        <li>
        555
        </li>

    </ul>

    <ul data-index="4" class="clearfix">

        <li>
       666
        </li>

    </ul>

    </div>
</section>

$('.recommendarticlelist h3 span').click(function () {

var tab = $(this);

if (!tab.hasClass('selected')) {

var currentIndex = tab.siblings('.selected').data('index');

tab.addClass('selected');

tab.siblings('.selected').removeClass('selected');

var index = tab.data('index');

var articleList = $('.recommendarticlelist-c ul');

articleList.filter('[data-index=' + currentIndex + ']').css('display', 'none');

articleList.filter('[data-index=' + index + ']').css('display', 'block');

}

});

$('.recommendarticlelist h3 span:first').click();