如何通过JavaScript、css、H5实现简单的tab栏切换和复用功能

2025-09-18 22:38:01

一、效果展示

二、实现的大致原理

1.我们先通过css 和h5布局得到最基本的tab栏样式（有代码参考）

2.在获得样式，给我们所需要点击的目标设置监听事件，在获取节点，设置一个自定义的节点属性index,通过它在获取点击出现样式的节点，在经过寻找元素，设置全取消，点击相应的节点出现的效果。这里获取节点方式，都是通过点击元素获取父元素，在获得子元素，同级获得兄弟元素，在获取兄弟元素的子元素（笼统的解释，细节部分看代码段的解释）

三、H5的布局

没有特殊的地方，都是基本的写法，只要给定一定的选择器就可以了

    <div class="tab">
        <div class="nav">
            <a href="javascript:;" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  class="hover">公司新闻</a>
            <a href="javascript:;" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >公司动态</a>
            <a href="javascript:;" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >行业新闻</a>
        </div>
        <div class="nav_con">
            <div>内容</div>
            <div>动态</div>
            <div>行业</div>
        </div>
    </div>

    <div class="tab">
        <div class="nav">
            <a href="javascript:;" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  class="hover">大学</a>
            <a href="javascript:;" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >中学</a>
            <a href="javascript:;" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >小学</a>
        </div>
        <div class="nav_con">
            <div>大学内容</div>
            <div>中学内容</div>
            <div>小学内容</div>
        </div>
    </div>

四、CSS样式

为了得到视屏中的样式，需要设置最基本的效果，通过浮动，是元素在同一行，浮动会脱离文档流，可以给a标签设置宽高，可以设置一些外边距，使得好看一些。注意设置出现内容的消失，我们默认只出现第一个。

        a{
            text-decoration: none;
            width: 180px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            color: #666;
            float: left;
            margin-right: 15px;
        }
        .nav a{
            background-color: beige;
        }
        .nav a.hover{
            background-color: blue;
        }
        .nav_con div:first-child~div{
            display: none;
        }
        .nav::after{
            content: '';
            display: block;
            clear: both;
        }
    .nav_con{
        margin-bottom: 50px;
    }

五、JS代码内容

按照顺序来，流程如下

获取元素

通过委派给父亲添加监听事件

先获得当前的父节点，在通过父节点获得所有的子节点

设置排他思想

给每一个子节点加上一个自定义属性 index

获取当前被点击的nav a上面的属性index

获取当前元素的父级元素，在获得父级的兄弟，在找到子元素

当前nav_con 显示内容

当前节点获得hover样式

 let navNodes = document.querySelectorAll('.nav');
         for(let i=0;i<navNodes.length;i++){
        //通过委派给父亲添加监听事件
    navNodes[i].addEventListener('click',function(e){
        //先获得当前的父节点，在通过父节点获得所有的子节点
 let navs = e.target.parentNode.children;
        //设置排他思想
    for(let j=0;j<navs.length;j++){
    navs[j].className='';
        //给每一个子节点加上一个自定义属性 index
    navs[j].setAttribute("index",j)
}
        //获取当前被点击的nav a上面的属性index
 let thisIndex = e.target.getAttribute("index");
        //获取当前元素的父级元素，在获得父级的兄弟，在找到子元素
 let nav_cons = e.target.parentNode.nextElementSibling.children;
        for(let j=0;j<nav_cons.length;j++){
        nav_cons[j].style.display = "none";
}
        //当前nav_con 显示内容
        nav_cons[thisIndex].style.display="block"

       //当前节点获得hover样式
        e.target.className = "hover"
})
}

六、完整代码

<!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>
        a{
            text-decoration: none;
            width: 180px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            color: #666;
            float: left;
            margin-right: 15px;
        }
        .nav a{
            background-color: beige;
        }
        .nav a.hover{
            background-color: blue;
        }

        .nav_con div:first-child~div{
            display: none;
        }
        .nav::after{
            content: '';
            display: block;
            clear: both;
        }
    .nav_con{
        margin-bottom: 50px;
    }
    </style>
</head>
<body>
    <div class="tab">
        <div class="nav">
            <a href="javascript:;" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  class="hover">公司新闻</a>
            <a href="javascript:;" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >公司动态</a>
            <a href="javascript:;" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >行业新闻</a>
        </div>
        <div class="nav_con">
            <div>内容</div>
            <div>动态</div>
            <div>行业</div>
        </div>
    </div>

    <div class="tab">
        <div class="nav">
            <a href="javascript:;" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  class="hover">大学</a>
            <a href="javascript:;" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >中学</a>
            <a href="javascript:;" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >小学</a>
        </div>
        <div class="nav_con">
            <div>大学内容</div>
            <div>中学内容</div>
            <div>小学内容</div>
        </div>
    </div>

    <script>
        let navNodes = document.querySelectorAll('.nav');
         for(let i=0;i<navNodes.length;i++){
        //通过委派给父亲添加监听事件
            navNodes[i].addEventListener('click',function(e){
                //先获得当前的父节点，在通过父节点获得所有的子节点
                let navs = e.target.parentNode.children;
                for(let j=0;j<navs.length;j++){
                    navs[j].className='';
                    //给每一个子节点加上一个自定义属性 index
                    navs[j].setAttribute("index",j)
                }
                //获取当前被点击的nav a上面的属性index
                let thisIndex = e.target.getAttribute("index");
                //获取当前元素的父级元素，在获得父级的兄弟，在找到子元素
                let nav_cons = e.target.parentNode.nextElementSibling.children;
                for(let j=0;j<nav_cons.length;j++){
                    nav_cons[j].style.display = "none";
                }
                //当前nav_con 显示内容
                nav_cons[thisIndex].style.display="block"

                //当前节点获得hover样式
                e.target.className = "hover"
            })
         }

    </script>
</body>
</html>

总结

到此这篇关于如何通过JavaScript、css、H5实现简单的tab栏切换和复用功能的文章就介绍到这了,更多相关JS css H5实现tab栏切换和复用内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

JavaScript+CSS实现模态框效果

本文实例为大家分享了JavaScript+CSS实现模态框效果的具体代码,供大家参考,具体内容如下发现的问题 1)鼠标按下后拖动的瞬间,光标会脱离模态盒子跑到外面2)鼠标弹起事件不起作用解决的思路首先是因为代码里有用到offsetLeft和offsetTop这两个属性,所以考虑是不是模态框的定位出现了问题 . 又:设置关闭标签设置了绝对定位,那么loginBox作为其父级元素我将其设置为相对定位. 各个类型定位的介绍: 1.静态定位: position: static 默认,也就是文档流定
使用JavaScript和CSS实现简单的字符计数器

目录项目基本结构 1.字符计数器的基本结构 2.添加标题 3.使用 textarea 创建一个输入框 4.看字数结果的位置 5.激活字符计数 javascript 完整源码下载在本文中,你将学习如何使用 JavaScript 创建字符计数器.计数的数字可以在小显示屏中看到.如果你需要,可以在那个输入框中设置一个限制. 下面我给出了一个预览,可以帮助你了解这个 javascript 字符计数是如何工作的.如果您只想要源代码,可以在文末获取. 在线演示地址项目基本结构目录结构如下: 1.字符
JavaScript CSS解析B站的弹幕可以不挡人物原理及技巧

目录正文 demo Experimental: 这是一个实验中的功能正文那天在B站看视频的时候偶然发现当字幕遇到人物的时候就被裁切了,不会挡住人物,觉得很神奇,于是决定一探究竟. 高端的效果,往往只需要采用最朴素的实现方式,忙碌了两个小时,陈师傅打开了F12,豁然开朗.一张图片+一个属性,直接搞定. demo 为了印证我的想法,我决定自己写一个demo <!DOCTYPE html> <html lang="en"> <head> <m
JS+CSS实现图片预加载与背景图上中下切图

图片预加载为什么使用图片预加载为什么会考虑使用图片预加载呢?你是否曾有个网站,在那个网站你要滚动你的导航然后有个延迟直到图片被加载完……预加载将在这方面帮助你. 它将在页面加载的时候加载那些图片并将其存储在浏览器的缓存里面.这样当用户滚动导航的时候,很漂亮而且流畅,没有延迟. 下面整理常用的图片预加载: 1.使用纯的css进行图片预加载 body:after { content: ""; display: block; position: absolute; background:
js+css实现计算器功能

本文实例为大家分享了js+css实现计算器功能的具体代码,供大家参考,具体内容如下目前仅实现了最基础的运算功能 (因为是js的运算内核,有些小数点计算并不准确,懒得去做去小数点后几位的操作) 一.最终呈现的视图效果二.思路代码量有点多,没办法.一开始只是无聊随便写的,没有构思,越写到后面越冗杂,自己又不想重新推翻去写. 三.代码逻辑 <style> * { margin: 0; padding: 0; }
JavaScript+CSS实现唯美蝴蝶动画

目录演示技术栈源码对部分蝴蝶的设定飞动的设置对蝴蝶形体的设置演示技术栈关于svg标签在svg中关于图形的复用,是通过标签defs来解决的. 举个例子:在图形中红色圆圈 ● 还有黄色圆圈 ● 都是复用的元素.结构都是一样的,只是颜色和位置的差别. 关于figure: <figure标签规定独立的流内容(图像.图表.照片.代码等等). <figure元素的内容应该与主内容相关,同时元素的位置相对于主内容是独立的.如果被删除,则不应对文档流产生影响. 关于perspective-o
JavaScript实现简单的tab选项卡切换

本文实例讲解了JavaScript实现简单的tab选项卡切换的示例代码,分享给大家供大家参考,具体内容如下效果图: 具体代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>table切换</title> <style type="text/css"> *{ paddi
Vue中tab栏切换的简单实现

目录一.效果展示二.实现原理三.css和h5的代码,获得最基本的样式 1.css 2.H5 这是没有在使用Vue书写前的样式四.Vue部分一.效果展示二.实现原理主体通过绑定事件,索引的利用,v-for的数组遍历,来实现的切换效果. 具体细节看代码段的解释,根据个人所需去了解一下,更多的是入门理解其中的细思. 三.css和h5的代码,获得最基本的样式 1.css 主体的布局根据个人的喜好,这里我只进行了简单的布局. 其中也用到了浮动,和清除浮动. 主要让展现的效果好看一些.具体样式
jquery+css实现Tab栏切换的代码实例

前几天面试碰到现场给写一个Tab栏切换的功能,思想基本上懂,但是好久没写过,一时要全部实现效果还真有点难.回来后,再把思路理一理,写一个,基础还是很重要的. 最终要实现的效果图如下: (1)点击tab栏显示对应的内容,并且tab栏样式变化.实现方式:一般tab栏如果要做成比较好看的样式,会切两张图作为背景,一张用于选中时的背景,一张用于未选中的背景.这里为了简单,只用css设置样式.然后为每个tab绑定click事件,当触发click事件时,对应的内容div的display设置block,否则设
JavaScript实现简易tab栏切换内容栏

本文实例为大家分享了JavaScript实现简易tab栏切换内容栏的具体代码,供大家参考,具体内容如下 html+css部分 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <m
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实现简易tab栏切换案例

本文实例为大家分享了JavaScript实现简易tab栏切换效果的具体代码,供大家参考,具体内容如下 1. tab栏-案例1 tab栏分析 li里面的分析 js实现隐藏与显示排他思想: 1).所有元素全部清除样式(干掉其他人) 2).给当前元素设置样式 (留下我自己) 3).注意顺序不能颠倒,首先干掉其他人,再设置自己我的思路: 代码实现: <!DOCTYPE html> <html lang="en"> <head> <meta char
JS实现简单Tab栏切换案例

本文实例为大家分享了JS实现简单Tab栏切换的具体代码,供大家参考,具体内容如下要求:当鼠标点击上面相应的选项卡(tab),下面页面的内容也随之而改变. 结构分析: 全部的内容都放到一个大的盒子里面,盒子里面又可以分为上面和下面两个盒子. 上面的盒子放了 5个li,装着5个小的选项卡,默认会有一个被选中: 下面的盒子也包含了 5个 div 模块,模块内容与上面的选项一一对应,当前默认的只有第一个 div会被显示出来. 实现思路: 点击切换选项卡部分 Tab 栏切换有2个大的模块 1.上面模块
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
JavaScript实现tab栏切换的效果

tab栏:点击不同的标签,显示不同的内容,被点击的标签样式发生改变(突出选中的是哪一个) 实现思路: 1.将tab栏分为上下两部分,上面是导航列表,下面是各部分对应的内容.把标签和内容都写出来,内容按照标签顺序依次顺着写,给标签都添加自定义属性- - -index,属性值从0开始,依次增加1 2.首先实现上面的效果,点击后样式切换,被点击的字体颜色.背景颜色改变等: ①css定义一个类eg:current,里面定义改变后的样式,先给第一个标签写一个该类名,其他的不写类名, ②js获取所有标签元素
jQuery简单实现tab选项卡切换效果

抽空把公司项目上用的tab效果封装了一下,实在是需要用的地方太多了~~~ 效果图: 代码: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="http://apps