📋 个人简介
- 💖 作者简介：大家好，我是阿牛，全栈领域新星创作者。😜
- 📝 个人主页：馆主阿牛🔥
- 🎉 支持我：点赞👍+收藏⭐️+留言📝
- 📣 系列专栏：硬泡 javascript🍁
- 💬格言：迄今所有人生都大写着失败，但不妨碍我继续向前！🔥
上期传送门：
👉初识 JavaScript（揭开javascript的神秘面纱）
👉javascript中的数据类型
👉javascript中的数据类型转换
👉javascript 基础案例（循环）
👉面试官最爱考的 javascript 预解析，你搞明白了吗？
👉“撩过”c++的对象，“拿捏”了python的对象，你还怕拿不下javascript的对象吗？
👉javascript 内置对象Math总结及其案例
👉 javascript 内置对象Date总结及案例
👉解锁前端密码框常见功能做法
👉前端实现动态生成表格，是蒸的C
👉四行js代码让别人无法复制你的网站文字，八行程序员都哭了
👉这些前端案例看似很简单（内附动图）
目录
🌟前言
tab栏切换制作是我们web开发中一个十分常见的案例，今天在这里写写，希望对大家有所帮助，还是要用到我们上节写到的排他思想！好好学哦！
✨思路
1.循环为每个小li注册事件，在注册事件之前同时为点击的小li添加自定义属性index用来保存索引号。
2.用排他思想，点击小li后首先循环通过改变className去掉所有按钮背景色（干掉其他人），然后为点击的按钮添加class增加背景色（留下我自己）。
3.循环将下面显示区的display属性设置为none,然后获取你当前点击的li的index属性值，这个索引和下面的div是对应的，最终将这个index对应的div的display属性设置为block就可以了。还是排他思想。
✨代码
💥原生版
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="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><divclass="tab"><divclass="tab_list"><ul><liclass="current">商品介绍</li><li>规格与包装</li><li>售后保障</li><li>商品评价</li><li>手机社区</li></ul></div><divclass="tab_con"><divclass="item"style="display:block;">
商品介绍模块内容
</div><divclass="item">
规格与包装模块内容
</div><divclass="item">
售后保障
</div><divclass="item">
商品评价
</div><divclass="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了，这些对初学者都很有用，我把他们都放在我的专栏里了，精心打造了软磨硬泡系列，一起来学习吧！
🏰系列专栏
👉软磨 css
👉硬泡 javascript
👉前端实用小demo
版权归原作者 馆主阿牛 所有， 如有侵权，请联系我们删除。