data属性和jQuery实现tab栏切换效果

   网页特效     2020-07-25 12:17     小黑     105     0     0     0
destoon程序前端开发教程
学习要点:jQuery实现tab栏切换效果

html代码

<div class="tabs">
    <nav class="tab-title">
        <a href="javascript:;" class="active" data-cont="toutiao">头条</a>
        <a href="javascript:;" data-cont="resou">热搜</a>
        <a href="javascript:;" data-cont="paihang">排行榜</a>
        <a href="javascript:;" data-cont="guonei">国内</a>
    </nav>
    <div class="tab-content">
        <section class="cont" id="toutiao">
            头条
        </section>
        <section class="cont" id="resou">
            热搜
        </section>
        <section class="cont" id="paihang">
            排行榜
        </section>
        <section class="cont" id="guonei">
            国内
        </section>
    </div>
</div>

CSS

html,body {
	margin:0;
	padding:0;
	width:100%;
	font-family:"Microsoft Yahei";
}
.tabs {
	width:80%;
	height:300px;
	margin:50px 10%;
	border:1px solid #ccc;
}
.tab-title {
	display:flex;
	background:#fff;
}
.tab-title a {
	display:block;
	text-decoration:none;
	text-align:center;
	width:25%;
	height:40px;
	flex:1;
	padding:0 10px;
	color:#666;
	font-size:16px;
	line-height:40px;
	border-right:1px solid #f40;
	border-bottom:2px solid #f40;
}
.tab-title a:last-child {
	border-right:0;
}
.tab-title a.active {
	color:#f40;
	border-bottom:0;
}
.tab-content {
	width:100%;
	height:100%;
}
.tab-content .cont {
	display:none;
	overflow:hidden;
	font-size:50px;
}

JS部分

$(function() {
    var secId = $('.active').get(0).dataset["cont"];
    $("#" + secId).css('display', 'block');
    $('.tab-title').on('click', 'a', function(e) {
        var cur = $(".active");
        cur.removeClass("active");
        var currentSec = cur.get(0).dataset["cont"];
        $("#" + currentSec).css('display', 'none');
        this.classList.add("active");
        var secID = this.dataset["cont"];
        $(this).offset().top;
        $("#" + secID).css('display', 'block');
    })
})


最终效果:

--结束END--

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

本文标题: data属性和jQuery实现tab栏切换效果

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

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

下班PC阅读不方便?

手机也可以随时学习开发

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

圈友点评

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

×

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

福利

免费
福利

幸运大转盘,好礼等您拿

模板开发网公众号

模板开发网微信小程序

代授权

程序
授权

小黑

联系
客服

联系客服:

在线QQ: 290948585

客服电话: 18605917465

E_mail邮箱: kf@dtmuban.com

微信公众号: kuzhanhui

微信小程序: dt模板

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

工作时间:

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

反馈

用户
反馈