js切换选项卡（前端实现tab栏切换，这么常见的案例你学会了吗？）
📋 个人简介
💖 作者简介：大家好 ，我是阿牛 ，全栈领域新星创作者 。😜 📝 个人主页：馆主阿牛🔥 🎉 支持我：点赞👍+收藏⭐️+留言📝 📣 系列专栏：硬泡 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> <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了 ，这些对初学者都很有用 ，我把他们都放在我的专栏里了 ，精心打造了软磨硬泡系列 ，一起来学习吧！
🏰系列专栏
👉软磨 css
👉硬泡 javascript
👉前端实用小demo创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！