欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

如何通過JavaScript、css、H5實現簡單的tab欄切換和復用功能

 更新時間：2022年11月28日 10:15:51   作者：小余努力搬磚  
tab切換在項目中也算是常用技術,一般實現tab切換都用js或者jq實現,下面這篇文章主要給大家介紹了關于如何通過JavaScript、css、H5實現簡單的tab欄切換和復用功能的相關資料,需要的朋友可以參考下

一、效果展示

二、實現的大致原理

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

2.在獲得樣式，給我們所需要點擊的目標設置監(jiān)聽事件，在獲取節(jié)點，設置一個自定義的節(jié)點屬性index,通過它在獲取點擊出現樣式的節(jié)點，在經過尋找元素，設置全取消，點擊相應的節(jié)點出現的效果。這里獲取節(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>內容</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>大學內容</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代碼內容

按照順序來，流程如下

獲取元素

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

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

設置排他思想

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

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

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

當前nav_con 顯示內容

當前節(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;
        //設置排他思想
    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 顯示內容
        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>內容</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>大學內容</div>
            <div>中學內容</div>
            <div>小學內容</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 顯示內容
                nav_cons[thisIndex].style.display="block"
 
                //當前節(jié)點獲得hover樣式
                e.target.className = "hover"
            })
         }
 
 
 
    </script>
</body>
</html>

總結

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

相關文章

最新評論