最简单的TAB切换

   网页特效     2020-07-25 12:21     最简单的TAB切换     180     0     0     0
destoon程序前端开发教程
学习要点:tab切换显示不同内容

HTML部分

<div class="box">
    <ul class="ul_list clearfix">
        <li class="active">香蕉</li>
        <li>苹果</li>
        <li>西瓜</li>
        <li>草莓</li>
    </ul>
    <div class="div_box">
        <div class="div_list" style="display:block;">
            <ul>
                <li>香蕉香蕉香蕉香蕉香蕉</li>
                <li>香蕉香蕉香蕉香蕉香蕉</li>
                <li>香蕉香蕉香蕉香蕉香蕉</li>
                <li>香蕉香蕉香蕉香蕉香蕉</li>
                <li>香蕉香蕉香蕉香蕉香蕉</li>
            </ul>
        </div>
        <div class="div_list">
            <ul>
                <li>苹果苹果苹果苹果苹果苹果苹果苹果苹果苹果苹果</li>
                <li>苹果苹果苹果苹果苹果蕉</li>
                <li>苹果苹果苹果苹果苹果</li>
                <li>香苹果苹果苹果苹果苹果香蕉香蕉</li>
                <li>香苹果苹果苹果苹果苹果苹果蕉</li>
            </ul>
        </div>
        <div class="div_list">
            <ul>
                <li>西瓜西瓜西瓜西瓜西瓜</li>
                <li>西瓜西瓜西瓜西瓜西瓜西瓜西瓜西瓜</li>
                <li>西瓜西瓜西瓜西瓜西瓜西瓜蕉</li>
                <li>西瓜西瓜西瓜西瓜西瓜西瓜蕉</li>
                <li>西瓜西瓜西瓜西瓜西瓜西瓜</li>
            </ul>
        </div>
        <div class="div_list">
            <ul>
                <li>草莓</li>
                <li>草莓草莓草莓草莓草莓</li>
                <li>草莓草莓草莓草莓草莓香蕉香蕉香蕉香蕉</li>
                <li>香蕉香蕉草莓草莓草莓香蕉香蕉</li>
                <li>香蕉草莓草莓草莓草莓草莓香蕉香蕉香蕉</li>
            </ul>
        </div>
    </div>
</div>


CSS部分


* {
	margin:0;
	padding:0;
}
body {
	font-family:"Microsoft YaHei";
}
li {
	list-style:none;
}
.clearfix:before,.clearfix:after {
	content:"";
	display:table;
}
.clearfix:after {
	clear:both;
}
.clearfix {
	clear:both;
	*zoom:1;
}
.show {
	display:block!important;
}
.box {
	width:400px;
	margin:20px auto;
	border:1px solid #dcdcdc;
}
.ul_list {
	width:100%;
	height:35px;
	border-bottom:1px solid #dcdcdc;
}
.ul_list li {
	float:left;
	width:25%;
	line-height:35px;
	text-align:center;
	border-left:1px solid #dcdcdc;
	box-sizing:border-box;
	cursor:pointer;
}
.ul_list li.active {
	background:#00a1ea;
	color:#fff;
}
.div_box {
	padding:20px;
}
.div_box .div_list {
	display:none;
}
.div_box .div_list ul li {
	line-height:30px;
	font-size:14px;
	cursor:pointer;
}
.div_box .div_list ul li:hover {
	color:#00a1ea;
}


JS部分


$(function() {
    $('.box .ul_list li').on('click', function() {
        $(this).addClass('active').siblings('li').removeClass('active');
        //获取当前li的索引
        var n = $(this).index();
        $('.div_box .div_list').eq(n).show().siblings('.div_list').hide();
    });
});


最终效果

--结束END--

有问题投稿请发送至: 邮箱/kf@dtmuban.com    QQ/290948585

本文标题: 最简单的TAB切换

本文链接: https://www.mbkfw.com/course/806.html (转载时请注明来源链接)

阅读更多
 
本文标签: 切换 TAB
您已取消点赞
成功点赞
请登录后再来点赞
收藏成功

下班PC阅读不方便?

手机也可以随时学习开发

微信关注公众号“模板开发网”
"模板开发网前端开发教学"
每日干货技术分享
【ECS精选特惠】新用户上云低至1折起
 
0

圈友点评

文明上网理性发言,请遵守网络评论服务协议

×

《客户实名在线注册登记》售后一直都在!

福利

免费
福利

幸运大转盘,好礼等您拿

模板开发网公众号

模板开发网微信小程序

代授权

程序
授权

小黑

联系
客服

联系客服:

在线QQ: 290948585

客服电话: 18605917465

E_mail邮箱: kf@dtmuban.com

微信公众号: kuzhanhui

微信小程序: dt模板

售前咨询 售后服务 DT授权代办 在线交谈 智能小云

工作时间:

周一至周五: 09:00 - 18:00

反馈

用户
反馈