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

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

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

分析：通过display属性控制每一个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>

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

javascript选项卡操作方法汇总

jquery选项卡操作方法汇总

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

赞 (0)

相关推荐

  • js实现tab栏切换效果

    本文实例为大家分享了js实现tab栏切换效果的具体代码,供大家参考,具体内容如下 效果展示: 源码展示: <!doctype html> <html> <head> <meta charset="utf-8"> <title>js实现tab栏切换</title> <style> * { margin: 0; margin: 0; padding: 0; list-style: none; } .nav

  • vuejs element table 表格添加行,修改,单独删除行,批量删除行操作

    1.表格动态添加,也可删除 <template> <div class="TestWord"> <el-button @click="addLine">添加行数</el-button> <el-button @click="save">保存</el-button> <el-table :data="tableData" style="wid

  • 基于JS实现table导出Excel并保留样式

    浏览器环境:谷歌浏览器 1.在导出Excel的时候,保存table的样式,有2种方法,①是在table的行内写style样式,②是在模板里面添加样式 2.第一种方式:行内添加样式 <td>公司一</td> 效果: 完整代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</

  • js tab栏切换代码实例解析

    js tab栏切换代码实例解析

    今天机试有个内容是做网易云课堂tab栏切换的,如下 先简单说下我当时的想法 1.先弄一个大div盒子,我命名为tab 2.在大盒子tab里面有两个小盒子,分别是标题栏(tab_list)和内容栏(tab_con) 3.采用display:flex:使标题栏菜单和内容栏的内容水平对齐(可能待会放的代码不是很规范,但实现对齐效果) 4.js编写鼠标移入事件,主要是利用display:none和display:block之间的切换. 下面放下我当时写的代码吧,可能写得不是很正规,不符合习惯,请大家见谅

  • js实现文章目录索引导航(table of content)

    什么叫TOC呢?table of content. 具体什么效果呢?可以随便找个hexo博客中体验一下,例如这个. 好了,实现它有2个要点: 点目录跳到段落:通过<a>标签的锚点实现,其原理在这里. 滚动触发目录变换:通过js监听滚动事件,判定当前所处段落,令对应目录项高亮. 我写了一个简单的demo来演示这个效果, 源码地址:https://github.com/owenliang/js-toc 在线体验:http://owenliang.github.io/js-toc 实现分析 #toc

  • JavaScript实现tab栏切换效果

    本文实例为大家分享了JavaScript实现tab栏切换效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &l

  • 原生JavaScript写出Tabs标签页的实例代码

    最近在重新学习JavaScript,手写了一个tabs标签页. 话不多说,直接开始. 首先,是前端页面. 图1 tabs 先来把tabs分解一下: 图2 tabs分解 首先,一个大的框div,上面红色的框是导航栏nav,导航栏里是一个无序列表ul,里面三个li标签(黄色的框),li标签里两个绿色标签是两个span,一个用来放导航的名字,一个用来放导航关闭的icon,右边是一个button,用来添加新的导航栏及内容:下方是导航栏的内容section. 导航tabs.html代码如下: <!DOCT

  • JavaScript 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&quo

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

    本文实例为大家分享了原生css+js实现tab切换功能的具体代码,供大家参考,具体内容如下 现在很多的ui框架都集成了tab功能,使用过程中只需按照他们的api套用即可,但在有时jquery项目中会觉得为了一个tab功能再单独调用一个ui库有些小题大做,所以博主这里推荐了原生tab的实现 分析:通过display属性控制每一个tab的显示 以下是图片示例: 以下是代码部分: <!DOCTYPE html> <html lang="en"> <head>

  • 原生JS封装vue Tab切换效果

    原生JS封装vue Tab切换效果

    本文实例为大家分享了原生JS封装vue Tab切换的具体代码,供大家参考,具体内容如下 先看效果图 使用的技术 vue,js,css3 vue组件 可以直接使用 <template> <div class="bookcircle-header"> <ul class="wrapper" :class="headerActive == 0 ? 'friend' : 'booklist'"> <li @cli

  • JS实现的简单tab切换功能完整示例

    JS实现的简单tab切换功能完整示例

    本文实例讲述了JS实现的简单tab切换功能.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.jb51.net tab切换</title> <style> * { padding: 0; margin: 0 } body { font-size: 12p

  • JS实现的tab切换并显示相应内容模块功能示例

    JS实现的tab切换并显示相应内容模块功能示例

    本文实例讲述了JS实现的tab切换并显示相应内容模块功能.分享给大家供大家参考,具体如下: 思路:一层循环遍历操作的元素并获取当前遍历到的元素的下标,通过下标去选择显示对应的内容模块. 二层循环将元素恢复操作前的状态. <!--- JS --> var fbUls =document.getElementById("oUl"); var fbLis = fbUls.getElementsByTagName("li"); var aDivs = docum

  • JS+CSS实现滑动切换tab菜单效果

    JS+CSS实现滑动切换tab菜单效果

    本文实例讲述了JS+CSS实现滑动切换tab菜单效果.分享给大家供大家参考.具体如下: 这是风格简单的一款JS+CSS滑动门特效代码,当鼠标滑过菜单的时候,二级菜单自动切换,鼠标不需要点击,滑动门效果是个比较流行的网页菜单效果,在网上经常可看到这种菜单的身影.本菜单在火狐.IE8.Chrome下测试通过,代码兼容性还可以,自己用的化再美化一下风格. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-move-cha-tab-menu-

  • js+css实现tab菜单切换效果的方法

    本文实例讲述了js+css实现tab菜单切换效果的方法.分享给大家供大家参考.具体实现方法如下: index.css如下: 复制代码 代码如下: * {      margin: 0px;      padding: 0px;  }  body {      width: 600px;      margin: 0 auto;      background-color: silver;  }    #contanier {      background-color: yellow;     

  • JS+CSS实现自动切换的网页滑动门菜单效果代码

    JS+CSS实现自动切换的网页滑动门菜单效果代码

    本文实例讲述了JS+CSS实现自动切换的网页滑动门菜单效果代码.分享给大家供大家参考.具体如下: 这是一款支持自动切换功能的网页滑动门菜单,JS与CSS结合的技术成果,有人说它是自己会切换的网页选项卡标签面板,QQ登录后弹出的每日要闻迷你窗口中有类似效果,但是代码写法却是截然不同的,每一位作者的思路是不同的,因此您多了一份参考. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-auto-cha-tab-menu-style-code

  • 原生JS实现简单的倒计时功能示例

    原生JS实现简单的倒计时功能示例

    本文实例讲述了原生JS实现简单的倒计时功能.分享给大家供大家参考,具体如下: 1.第一种 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>www.jb51.net JS倒计时</title> </head> <body> <div id="div"></div> <scr

  • JS实现的样式切换功能tableCSS实例

    本文实例分析了JS实现的样式切换功能tableCSS.分享给大家供大家参考,具体如下: 把前阵子写的JQ插件函数(alterBgColor )改写成不基于JQ的代码,还添加了一个click样式效果 代码风格还是按照JQ插件风格来写,使用了闭包来循环设置TR元素的样式 function TableCss(options){ //如果没参数,就退出 if(arguments.length < 1 || !document.getElementById(options.tableName) ) { r

  • 非常漂亮的JS+CSS图片幻灯切换特效

    非常漂亮的JS+CSS图片幻灯切换特效,用在你的首页比较不错,宽屏图片格式,每张图片平滑飞入切换,鼠标放上自动切换,和FLASH的平滑效果差不多,视觉冲击效果很爽,而且代码也不多,调试调用都方便,建议关注一下哦! 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd

随机推荐