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