前端实现tab栏切换，这么常见的案例你学会了吗？
【摘要】 tab栏切换制作是我们web开发中一个十分常见的案例，今天在这里写写，希望对大家有所帮助，还是要用到我们上节写到的排他思想！好好学哦！
📋 个人简介
- 💖 作者简介：大家好，我是阿牛。
- 💬格言：迄今所有人生都大写着失败，但不妨碍我继续向前！🔥
@TOC
🌟前言
tab栏切换制作是我们web开发中一个十分常见的案例，今天在这里写写，希望对大家有所帮助，还是要用到我们上节写到的排他思想！好好学哦！
✨思路
1.循环为每个小li注册事件，在注册事件之前同时为点击的小li添加自定义属性index用来保存索引号。
2.用排他思想，点击小li后首先循环通过改变className去掉所有按钮背景色（干掉其他人），然后为点击的按钮添加class增加背景色（留下我自己）。
3.循环将下面显示区的display属性设置为none,然后获取你当前点击的li的index属性值，这个索引和下面的div是对应的，最终将这个index对应的div的display属性设置为block就可以了。还是排他思想。
✨代码
💥原生版
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
.tab{
width: 38%;
height: 400px;
margin: 100px auto;
}
.tab_list{
width: 100%;
height: 36px;
background-color: #f7f7f7;
border: 1px solid #eee;
border-bottom: 1px solid #e4393c;
}
.current {
background-color: #e4393c;
color: #fff;
}
.tab_list li{
font: 14px Microsoft YaHei;
display: inline-block;
padding:9px 25px;
}
.tab_list li:hover{
cursor: pointer;
}
.tab_con{
width: 100%;
height: 360px;
border: 1px solid #eee;
border-top: none;
}
.tab_con .item{
height: 100%;
display: none;
font-size: 13px;
text-indent: 13px;
}
</style>
</head>
<body>
<div class="tab">
<div class="tab_list">
<ul>
<li class="current">商品介绍</li>
<li>规格与包装</li>
<li>售后保障</li>
<li>商品评价</li>
<li>手机社区</li>
</ul>
</div>
<div class="tab_con">
<div class="item" style="display:block;">
商品介绍模块内容
</div>
<div class="item">
规格与包装模块内容
</div>
<div class="item">
售后保障
</div>
<div class="item">
商品评价
</div>
<div class="item">
手机社区
</div>
</div>
</div>
<script>
var lis = document.querySelector('.tab_list').querySelectorAll('li');
var divs = document.querySelector('.tab_con').querySelectorAll('div');
for (var i=0;i<lis.length;i++){
lis[i].setAttribute('index',i); //给5个小li设置索引号
lis[i].onclick = function(){
// 1.上面的模块选项卡，点击一个，他的底色变成红色
// 排他思想
// 消除所有人
for (var j=0;j<lis.length;j++){
lis[j].className = '';
}
// 保留我自己
this.className = 'current'; //this 指向事件函数的调用者
// 2.下面的显示内容模块
for (var k=0;k<divs.length;k++){
// 消除所有人
divs[k].style.display = 'none';
}
var index = this.getAttribute('index');
// 保留我自己
divs[index].style.display = 'block';
}
}
</script>
</body>
</html>
💥jquery版
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$(function(){
$(".tab_list li").click(function(){
$(".tab_list li").removeClass("current"); //干掉所有人
$(this).addClass("current"); //留下我自己
var index = $(this).index();
$(".tab_con .item").hide(); //干掉所有人
$(".tab_con .item").eq(index).show(); //留下我自己
});
});
可以看到js代码就一点点，写起来很简单的，代码长的还是我们的html和css,所以我们的js基础不难，赶紧冲冲冲~~~
✨动图演示
下面变化的内容都在一大块div中，你们想要怎么布局自己设计就好，不需要再写js了。
🌟结语
陆陆续续写了很多前端基础知识和小demo了，赶紧关注一手学习吧！
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）