javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > JS css H5实现tab栏切换和复用

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

作者：小余努力搬砖

tab切换在项目中也算是常用技术,一般实现tab切换都用js或者jq实现,下面这篇文章主要给大家介绍了关于如何通过JavaScript、css、H5实现简单的tab栏切换和复用功能的相关资料,需要的朋友可以参考下

一、效果展示

二、实现的大致原理

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栏切换和复用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:
阅读全文