jquery实现tab选项卡

本文介绍了一个简单的热点推荐切换效果的实现方式,通过点击不同的标签来显示对应的内容。利用jQuery操作DOM元素,实现了不同内容区域的显示与隐藏。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

<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();
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值