jquery实现tab选项卡

<section >婚纱礼服</span>
???????
??????? <span data-index="1" >婚庆时尚</span>
???????
??????? <span data-index="2" 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();