位置: IT常识 - 正文

前端实现tab栏切换，这么常见的案例你学会了吗？(前端按钮跳转界面)

编辑：rootadmin

前端实现tab栏切换，这么常见的案例你学会了吗？ 📋 个人简介💖 作者简介：大家好，我是阿牛，全栈领域新星创作者。😜📝 个人主页：馆主阿牛🔥🎉 支持我：点赞👍+收藏⭐️+留言📝📣 系列专栏：硬泡 javascript🍁💬格言：迄今所有人生都大写着失败，但不妨碍我继续向前！🔥

推荐整理分享前端实现tab栏切换，这么常见的案例你学会了吗？(前端按钮跳转界面)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:前端左右滑动切换tab,前端tab栏切换,前端菜单,前端左右滑动切换tab,前端tab页,前端tab页,前端tab页,前端tab栏切换,内容如对您有帮助，希望把文章链接给更多的朋友！

前些天发现了一个比较好的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。

点击跳转到网站：人工智能学习

上期传送门： 👉初识 JavaScript（揭开javascript的神秘面纱） 👉javascript中的数据类型 👉javascript中的数据类型转换 👉javascript 基础案例（循环） 👉面试官最爱考的 javascript 预解析，你搞明白了吗？ 👉“撩过”c++的对象，“拿捏”了python的对象，你还怕拿不下javascript的对象吗？ 👉javascript 内置对象Math总结及其案例 👉 javascript 内置对象Date总结及案例 👉解锁前端密码框常见功能做法 👉前端实现动态生成表格，是蒸的C 👉四行js代码让别人无法复制你的网站文字，八行程序员都哭了 👉这些前端案例看似很简单（内附动图）

目录📋 个人简介🌟前言✨思路✨代码💥原生版💥jquery版✨动图演示🌟结语🌟前言前端实现tab栏切换，这么常见的案例你学会了吗？(前端按钮跳转界面)

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了，这些对初学者都很有用，我把他们都放在我的专栏里了，精心打造了软磨硬泡系列，一起来学习吧！