快捷導(dǎo)航

如何通過JavaScript、css、H5實現(xiàn)簡單的tab欄切換和復(fù)用功能

更新時間：2022年11月28日 10:15:51 作者：小余努力搬磚

tab切換在項目中也算是常用技術(shù),一般實現(xiàn)tab切換都用js或者jq實現(xiàn),下面這篇文章主要給大家介紹了關(guān)于如何通過JavaScript、css、H5實現(xiàn)簡單的tab欄切換和復(fù)用功能的相關(guān)資料,需要的朋友可以參考下

一、效果展示

二、實現(xiàn)的大致原理

1.我們先通過css 和h5布局得到最基本的tab欄樣式（有代碼參考）

2.在獲得樣式，給我們所需要點擊的目標設(shè)置監(jiān)聽事件，在獲取節(jié)點，設(shè)置一個自定義的節(jié)點屬性index,通過它在獲取點擊出現(xiàn)樣式的節(jié)點，在經(jīng)過尋找元素，設(shè)置全取消，點擊相應(yīng)的節(jié)點出現(xiàn)的效果。這里獲取節(jié)點方式，都是通過點擊元素獲取父元素，在獲得子元素，同級獲得兄弟元素，在獲取兄弟元素的子元素（籠統(tǒng)的解釋，細節(jié)部分看代碼段的解釋）

三、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" >公司動態(tài)</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" >行業(yè)新聞</a>
        </div>
        <div class="nav_con"> 
            <div>內(nèi)容</div>
            <div>動態(tài)</div>
            <div>行業(yè)</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>大學內(nèi)容</div>
            <div>中學內(nèi)容</div>
            <div>小學內(nèi)容</div>
        </div>
    </div>

四、CSS樣式

為了得到視屏中的樣式，需要設(shè)置最基本的效果，通過浮動，是元素在同一行，浮動會脫離文檔流，可以給a標簽設(shè)置寬高，可以設(shè)置一些外邊距，使得好看一些。注意設(shè)置出現(xiàn)內(nèi)容的消失，我們默認只出現(xiàn)第一個。

        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代碼內(nèi)容

按照順序來，流程如下

獲取元素

通過委派給父親添加監(jiān)聽事件

先獲得當前的父節(jié)點，在通過父節(jié)點獲得所有的子節(jié)點

設(shè)置排他思想

給每一個子節(jié)點加上一個自定義屬性 index

獲取當前被點擊的nav a上面的屬性index

獲取當前元素的父級元素，在獲得父級的兄弟，在找到子元素

當前nav_con 顯示內(nèi)容

當前節(jié)點獲得hover樣式

 let navNodes = document.querySelectorAll('.nav');
         for(let i=0;i<navNodes.length;i++){
        //通過委派給父親添加監(jiān)聽事件
    navNodes[i].addEventListener('click',function(e){
        //先獲得當前的父節(jié)點，在通過父節(jié)點獲得所有的子節(jié)點
 let navs = e.target.parentNode.children;
        //設(shè)置排他思想
    for(let j=0;j<navs.length;j++){
    navs[j].className='';
        //給每一個子節(jié)點加上一個自定義屬性 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 顯示內(nèi)容
        nav_cons[thisIndex].style.display="block"
 
       //當前節(jié)點獲得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" >公司動態(tài)</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" >行業(yè)新聞</a>
        </div>
        <div class="nav_con"> 
            <div>內(nèi)容</div>
            <div>動態(tài)</div>
            <div>行業(yè)</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>大學內(nèi)容</div>
            <div>中學內(nèi)容</div>
            <div>小學內(nèi)容</div>
        </div>
    </div>
 
 
 
    <script>
        let navNodes = document.querySelectorAll('.nav');
         for(let i=0;i<navNodes.length;i++){
        //通過委派給父親添加監(jiān)聽事件
            navNodes[i].addEventListener('click',function(e){
                //先獲得當前的父節(jié)點，在通過父節(jié)點獲得所有的子節(jié)點
                let navs = e.target.parentNode.children;
                for(let j=0;j<navs.length;j++){
                    navs[j].className='';
                    //給每一個子節(jié)點加上一個自定義屬性 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 顯示內(nèi)容
                nav_cons[thisIndex].style.display="block"
 
                //當前節(jié)點獲得hover樣式
                e.target.className = "hover"
            })
         }
 
 
 
    </script>
</body>
</html>

總結(jié)

到此這篇關(guān)于如何通過JavaScript、css、H5實現(xiàn)簡單的tab欄切換和復(fù)用功能的文章就介紹到這了,更多相關(guān)JS css H5實現(xiàn)tab欄切換和復(fù)用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: