原生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动态创建div属性和样式示例代码
Oct 09 Javascript
JavaScript中的原型链prototype介绍
Dec 30 Javascript
javascript实现youku的视频代码自适应宽度
May 25 Javascript
AngularJS+Node.js实现在线聊天室
Aug 28 Javascript
jquery中cookie用法实例详解(获取,存储,删除等)
Jan 04 Javascript
js实现字符串和数组之间相互转换操作
Jan 12 Javascript
BootStrap中Datetimepicker和uploadify插件应用实例小结
May 26 Javascript
引用jquery框架后出错的解决方法
Aug 09 Javascript
详解微信小程序Radio选中样式切换
Jul 06 Javascript
react 生命周期实例分析
May 18 Javascript
JavaScript实现点击切换验证码及校验
Jan 10 Javascript
Vue-router编程式导航的两种实现代码
Mar 04 Vue.js
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
Yii2增加验证码步骤详解
2016/04/25 PHP
PHP数组与字符串互相转换实例
2020/05/05 PHP
jQuery事件 delegate()使用方法介绍
2012/10/30 Javascript
JavaScript创建类/对象的几种方式概述及实例
2013/05/06 Javascript
几种延迟加载JS代码的方法加快网页的访问速度
2013/10/12 Javascript
js实现网页倒计时、网站已运行时间功能的代码3例
2014/04/14 Javascript
七个很有意思的PHP函数
2014/05/12 Javascript
Avalonjs 实现简单购物车功能(实例代码)
2017/02/07 Javascript
基于JavaScript实现幸运抽奖页面
2020/07/05 Javascript
Node.js 进程平滑离场剖析小结
2019/01/24 Javascript
使用post方法实现json往返传输数据的方法
2019/03/30 Javascript
vue 中使用 watch 出现了如下的报错的原因分析
2019/05/21 Javascript
微信小程序 扭蛋抽奖机css3动画实现详解
2019/07/19 Javascript
layui下拉框获取下拉值(select)的例子
2019/09/10 Javascript
详解Vue后台管理系统开发日常总结(组件PageHeader)
2019/11/01 Javascript
jQuery实现动态向上滚动
2020/12/21 jQuery
vue-router路由懒加载及实现的3种方式
2021/02/28 Vue.js
将Django使用的数据库从MySQL迁移到PostgreSQL的教程
2015/04/11 Python
Python基于回溯法子集树模板解决最佳作业调度问题示例
2017/09/08 Python
对numpy Array [: ,] 的取值方法详解
2018/07/02 Python
Python树莓派学习笔记之UDP传输视频帧操作详解
2019/11/15 Python
使用Python画出小人发射爱心的代码
2019/11/23 Python
Python Sympy计算梯度、散度和旋度的实例
2019/12/06 Python
pycharm 2018 激活码及破解补丁激活方式
2020/09/21 Python
用python实现学生管理系统
2020/07/24 Python
python+opencv实现车道线检测
2021/02/19 Python
中国最大隐形眼镜网上商城:视客眼镜网
2016/10/30 全球购物
捷克原创男装和女装购物网站:Bolf.cz
2018/04/28 全球购物
几个人围成一圈的问题
2013/09/26 面试题
医学专业职业生涯规划范文
2014/02/05 职场文书
群众路线教育实践活动心得体会
2014/03/07 职场文书
有关爱国演讲稿
2014/05/07 职场文书
大学专科自荐信
2014/06/17 职场文书
学校禁毒宣传活动总结
2015/05/08 职场文书
辩论赛主持人开场白
2015/05/29 职场文书
Python实现学生管理系统并生成exe可执行文件详解流程
2022/01/22 Python