当前位置：代码迷 >> Web前端 >> jquery兑现tab选项卡

详细解决方案

jquery兑现tab选项卡

热度：88 发布时间：2012-09-19 13:43:53.0

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();

相关解决方案