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

🏰系列专栏 👉软磨 css 👉硬泡 javascript 👉前端实用小demo

本文链接地址:https://www.jiuchutong.com/zhishi/300080.html 转载请保留说明!

上一篇:FPN细节剖析以及pytorch代码实现

下一篇:DNN(全连接神经网络)(全连接神经网络是什么意思)

  • 网页设计模板企业网站是用来展示自身实力和形象的利器

    网页设计模板企业网站是用来展示自身实力和形象的利器

  • 小米平板5怎么查看运行内存(小米平板5怎么调成电脑模式)

    小米平板5怎么查看运行内存(小米平板5怎么调成电脑模式)

  • 微信跳转不到拼多多(微信跳转不到拼多多怎么解决)

    微信跳转不到拼多多(微信跳转不到拼多多怎么解决)

  • 在单元格中手动换行可以使用()组合键(在单元格中手动换行的方法是)

    在单元格中手动换行可以使用()组合键(在单元格中手动换行的方法是)

  • 蓝牙耳机左耳没声音了(蓝牙耳机左耳没电了右耳还能用吗)

    蓝牙耳机左耳没声音了(蓝牙耳机左耳没电了右耳还能用吗)

  • 抖音显示在线就一定在线吗(在线抖音)

    抖音显示在线就一定在线吗(在线抖音)

  • 分页符的作用是什么(分页符作用是分页吗)

    分页符的作用是什么(分页符作用是分页吗)

  • 2k 144hz需要什么显卡(2k144hz需要什么cpu)

    2k 144hz需要什么显卡(2k144hz需要什么cpu)

  • 华为手机怎么延长屏保时间(华为手机怎么延时拍照)

    华为手机怎么延长屏保时间(华为手机怎么延时拍照)

  • 扫描件怎么发给对方(扫描件怎么发给邮箱)

    扫描件怎么发给对方(扫描件怎么发给邮箱)

  • 家庭有必要装无线ap吗(家里有必要装wifi吗)

    家庭有必要装无线ap吗(家里有必要装wifi吗)

  • 滴滴顺风车全国开通了吗(滴滴顺风车300个城市名单)

    滴滴顺风车全国开通了吗(滴滴顺风车300个城市名单)

  • v1901a什么型号(v1901a什么型号处理器)

    v1901a什么型号(v1901a什么型号处理器)

  • 苹果手机显示未连接互联网是怎么回事(苹果手机显示未激活是怎么回事)

    苹果手机显示未连接互联网是怎么回事(苹果手机显示未激活是怎么回事)

  • 华为mate306g和8g区别(华为mate306gb和8gb区别)

    华为mate306g和8g区别(华为mate306gb和8gb区别)

  • 怎么把ppt调成兼容模式(ppt怎么设置为兼容)

    怎么把ppt调成兼容模式(ppt怎么设置为兼容)

  • 华为智慧能力要开启吗(华为智慧能力是什么作用)

    华为智慧能力要开启吗(华为智慧能力是什么作用)

  • 苹果手机怎么换购新手机(苹果手机怎么换电池)

    苹果手机怎么换购新手机(苹果手机怎么换电池)

  • 华为p30有双系统吗(华为p30有双系统怎么设置)

    华为p30有双系统吗(华为p30有双系统怎么设置)

  • 调音台怎么调(调音台怎么调混响)

    调音台怎么调(调音台怎么调混响)

  • 转账后拉黑能收钱吗(转账拉黑还能收吗)

    转账后拉黑能收钱吗(转账拉黑还能收吗)

  • 2016版ppt剪贴画在哪(ppt2013剪贴画)

    2016版ppt剪贴画在哪(ppt2013剪贴画)

  • oppo手机在哪看运行内存(oppo手机在哪看内存占用)

    oppo手机在哪看运行内存(oppo手机在哪看内存占用)

  • 腾讯视频保存的图片在哪(腾讯视频保存的视频怎么到手机相册)

    腾讯视频保存的图片在哪(腾讯视频保存的视频怎么到手机相册)

  • 亚马逊个人开店需要什么条件(亚马逊个人开店在国内交税吗)

    亚马逊个人开店需要什么条件(亚马逊个人开店在国内交税吗)

  • 快手直播瘦脸功能在哪里(快手直播瘦脸功能怎么开)

    快手直播瘦脸功能在哪里(快手直播瘦脸功能怎么开)

  • 隐藏资源管理器左侧“此电脑”中不常用的文件夹(隐藏资源管理器窗口)

    隐藏资源管理器左侧“此电脑”中不常用的文件夹(隐藏资源管理器窗口)

  • 金税三期系统的作用
  • 小规模纳税人认定的最新标准2022
  • 待转销项税额是几级科目
  • 增值税发票抵扣是什么意思
  • 房屋维修基金帐户怎么查
  • 在建无形资产入账
  • 个体户经营所得税率
  • 人力资源公司开办条件
  • 其他综合收益转入投资收益
  • 联营和合营的区别
  • 无形资产摊销以前年度摊多了
  • 企业所得税减半征收政策
  • 事业单位个税可以抵扣吗
  • 合并报表中少数股东权益是什么意思
  • 减免税款的会计处理
  • 汇票 到期
  • 公司车辆出售给个人怎么做账
  • 代缴代扣个人所得税手续费
  • 房地产企业交房时如何开票
  • 买鼠标去哪买
  • 投资收益率中投资总额包括哪些
  • 生产企业报关单金额大于发票金额
  • 收到工程发票如何做账
  • 劳务报酬怎么申报个税电子税务
  • windows10你需要trustedinstaller提供的权限才能更改
  • win11怎么取消开机启动项
  • 普通发票用记账吗
  • 合伙企业股东个税税率表
  • 出差现场租车费谁承担
  • 电脑任务栏图标怎么全部显示出来
  • 货款形式返还
  • 如何使用linux服务器
  • 福利补贴属于工资吗
  • php打包网站并在哪里打开
  • 汽车销售行业的税负率是多少
  • bug的5个级别
  • html怎么设置隐藏元素
  • 机器学习——BP神经网络详细介绍及案例Python代码实现
  • 命令arp-a
  • dir命令linux
  • 法人给对公账户转账
  • 异地工作人员管理
  • 上一年度的费用退回清算表怎么填
  • 现金流量表现金等价物有哪些
  • 织梦怎么新建页面
  • mysql两个数据库连接查询
  • 主营业务成本和营业成本的区别
  • 本月发生费用未支付会计处理
  • 应收账款坏账计提比例新标准
  • 先开票后出库会计处理
  • 进项税额属于什么会计科目
  • 预收冲应收怎么做账
  • 年底不发工资 员工离职
  • 销售费用包括哪些内容?其明细科目有哪些?
  • 销售固定资产怎么做账务处理
  • sqlserver获取表结构
  • mysql中的where子句
  • 关于中秋节的古诗
  • xp 更新
  • win10内置应用大全
  • win8资源管理器未响应
  • 查看电脑是否可以装两个固态
  • linux+c
  • linux ssh -v -p
  • win7唤醒后屏幕黑屏
  • win10系统如何设置锁屏壁纸图片
  • jquery的实现原理
  • tensorflowoom
  • unity游戏开发入门经典
  • require jquery
  • Node.js中的全局对象有
  • mysql命令备份数据库
  • jquery开发项目
  • jquery获取多个元素
  • python 查找中文
  • 第三方审计报告需要多久
  • 税控盘服务费必须每年交吗为什么
  • 广州国税地税上班时间
  • 土地二次买卖
  • 2021边疆补助什么时候下来
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设