原生js+css实现tab切换功能


Posted in Javascript onSeptember 17, 2020

本文实例为大家分享了原生css+js实现tab切换功能的具体代码,供大家参考,具体内容如下

现在很多的ui框架都集成了tab功能,使用过程中只需按照他们的api套用即可,但在有时jquery项目中会觉得为了一个tab功能再单独调用一个ui库有些小题大做,所以博主这里推荐了原生tab的实现

分析:通过display属性控制每一个tab的显示

以下是图片示例:

原生js+css实现tab切换功能

以下是代码部分:

<!DOCTYPE html>
<html lang="en">
 
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <script src="./jquery-3.4.1.min.js"></script>
 <title>tab功能实现</title>
 <style>
 body {
 margin: 0 auto;
 }
 
 .tab-menu {
 width: 100%;
 background: #F5F6F8;
 display: flex;
 }
 
 .tab-menu-span {
 width: 150px;
 height: 50px;
 line-height: 50px;
 cursor: pointer;
 text-align: center;
 }
 
 .tab-menu-span-hover {
 background: #0054A7;
 color: #ffffff;
 }
 
 .tab-list {
 position: relative;
 }
 
 .tab-list-span {
 padding: 20px 10px;
 height: 200px;
 position: absolute;
 top: 0;
 display: none;
 }
 </style>
</head>
 
<body>
 <div class="tab-class">
 <!-- 菜单 -->
 <div class="tab-menu">
 <div class="tab-menu-span">
 菜单一
 </div>
 <div class="tab-menu-span">
 菜单二
 </div>
 <div class="tab-menu-span">
 菜单三
 </div>
 </div>
 <!-- tab list -->
 <div class="tab-list">
 <div class="tab-list-span">
 1、金子啊,你是多么神奇。你可以使老的变成少的,丑的变成美的,黑的变成白的,错的变成对的……</br>
 2、玫瑰是美的,但更美的是它包含的香味。</br>
 3、恋爱的人去赴他情人的约会,像一个放学归来的儿童;可是当他和情人分别的时候,却上学去一般满脸懊丧。</br>
 </div>
 <div class="tab-list-span">
 4、时间会刺破青春表面的彩饰,会在美人的额上掘深沟浅槽;会吃掉稀世之珍!天生丽质,什么都逃不过他那横扫的镰刀。</br>
 5、笨蛋自以为聪明,聪明人才知道自己是笨蛋。</br>
 6、对众人一视同仁,对少数人推心置腹,对任何人不要亏负。 </br>
 </div>
 <div class="tab-list-span">
 7、希望者,思想之母也。</br>
 8、草率的婚姻少美满。</br>
 9、无数人事的变化孕育在时间的胚胎里。</br>
 10、要是不能把握时机,就要终身蹉跎,一事无成。</br>
 </div>
 </div>
 </div>
 <script>
 $('.tab-menu-span:first').addClass('tab-menu-span-hover');
 $('.tab-list-span:first').css('display', 'block');
 $('.tab-menu-span').hover(function () {
 $(this).addClass('tab-menu-span-hover');
 $(this).siblings().removeClass('tab-menu-span-hover');
 $('.tab-list-span').css('display', 'none');
 $('.tab-list-span').eq($(this).index()).css('display', 'block');
 })
 </script>
</body>
 
</html>

如果大家还想深入学习,可以点击两个精彩的专题:

以上就是为大家总结的tab切换实现方法,希望对大家的学习有所帮助,顺着这个思路动手制作自己tab切换特效。

Javascript 相关文章推荐
从JavaScript的函数重名看其初始化方式
Mar 08 Javascript
jQuery 使用手册(五)
Sep 23 Javascript
jQuery与ExtJS之选择实例分析
Aug 19 Javascript
基于jQuery的输入框在光标位置插入内容, 并选中
Oct 29 Javascript
jquery 检测元素是否存在的实例代码
Nov 19 Javascript
javascript实现验证身份证号的有效性并提示
Apr 30 Javascript
jquery使用ul模拟select实现表单美化的方法
Aug 18 Javascript
jQuery实现输入框下拉列表树插件特效代码分享
Aug 27 Javascript
Jquery获取第一个子元素简单实例
Jun 02 Javascript
ES6正则表达式扩展笔记
Jul 25 Javascript
Vue cli+mui 区域滚动的实例代码
Jan 25 Javascript
element表格翻页第2页从1开始编号(后端从0开始分页)
Dec 10 Javascript
vue使用screenfull插件实现全屏功能
Sep 17 #Javascript
Vue使用screenfull实现全屏效果
Sep 17 #Javascript
详解JavaScript中的数据类型,以及检测数据类型的方法
Sep 17 #Javascript
JavaScript编码小技巧分享
Sep 17 #Javascript
如何利用node转发请求详解
Sep 17 #Javascript
前端性能优化建议
Sep 17 #Javascript
JavaScript常用工具函数汇总(浏览器环境)
Sep 17 #Javascript
You might like
2020显卡排行榜天梯图 显卡天梯图2020年3月最新版
2020/04/02 数码科技
php横向重复区域显示二法
2008/09/25 PHP
使用PHP求两个文件的相对路径
2013/06/20 PHP
php mysql数据库操作类(实例讲解)
2017/08/06 PHP
js 分栏效果实现代码
2009/08/29 Javascript
js多级树形弹出一个小窗口层(非常好用)实例代码
2013/03/19 Javascript
js 将json字符串转换为json对象的方法解析
2013/11/13 Javascript
javascript实现给定半径求出圆的面积
2015/06/26 Javascript
JavaScript实现倒计时代码段Item1(非常实用)
2015/11/03 Javascript
jQuery 特性操作详解及实例代码
2016/09/29 Javascript
JS实现带动画的回到顶部效果
2017/12/28 Javascript
详解如何在Angular优雅编写HTTP请求
2018/12/05 Javascript
javascript中如何判断类型汇总
2019/05/14 Javascript
Vue+ElementUI项目使用webpack输出MPA的方法
2019/08/27 Javascript
jQuery实现移动端笔触canvas电子签名
2020/05/21 jQuery
[00:33]2016完美“圣”典风云人物:BurNIng宣传片
2016/12/10 DOTA
理解Python中的类与实例
2015/04/27 Python
python3 对list中每个元素进行处理的方法
2018/06/29 Python
Python之指数与E记法的区别详解
2019/11/21 Python
python实现飞行棋游戏
2020/02/05 Python
Python如何安装第三方模块
2020/05/28 Python
python3.9实现pyinstaller打包python文件成exe
2020/12/13 Python
video结合canvas实现视频在线截图功能
2018/06/25 HTML / CSS
HTML5 3D书本翻页动画的实现示例
2019/08/28 HTML / CSS
英国最大的线上保健品零售商之一:Vitamin Planet
2016/12/01 全球购物
世界上最好的足球商店:Unisport
2019/03/02 全球购物
Amcal中文官网:澳洲综合性连锁药房
2019/03/28 全球购物
简短的公司员工自我评价分享
2013/11/13 职场文书
婚礼主持词开场白
2014/03/13 职场文书
婚礼答谢宴主持词
2014/03/14 职场文书
社区关爱留守儿童活动方案
2014/08/22 职场文书
学生意外伤害赔偿协议书
2014/09/17 职场文书
打架赔偿协议书范本
2014/10/26 职场文书
2016中秋节晚会开场白
2015/11/26 职场文书
Redis实战高并发之扣减库存项目
2022/04/14 Redis
如何解决flex文本溢出问题小结
2022/07/15 HTML / CSS