使用JavaScript設定Tab欄自動切換

昨夜小楼听风雨發表於2024-04-07
JavaScript

在下面程式碼中設定了tab欄可以進行週期性的切換時間時5秒，也可以滑鼠移到相應的位置進行切換。

在允許過程中出現：Cannot read properties of undefined (reading 'className')報錯，不知道時什麼原因還沒有解決，希望大佬來指點一下！！！！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tab欄切換</title>
    <script>
            // 載入事件
            window.onload=function(){
                //獲取所有tab-head-div
                var head_divs = document.getElementById("tab-head").getElementsByTagName("div");
                //儲存當前焦點元素索引
                var current_index=0;
                // 啟動定時器
                var timer=window.setInterval(autoChange,5000);
                //遍歷元素
                for(var i=0;i<head_divs.length;i++){
                    //新增滑鼠滑動事件
                    head_divs[i].onmouseover = function(){
                        clearInterval(timer);
                        if(i != current_index){
                            head_divs[current_index].style.backgroundColor='';
                            head_divs[current_index].style.borderBottom='';
                        }
                        //獲取所有tab-body-ul
                        var body_uls=document.getElementById("tab-body").getElementsByTagName("ul");
                        //遍歷元素
                        for(var i=0;i<body_uls.length;i++){
                            //將所有元素設為隱藏
                            body_uls[i].className = body_uls[i].className.replace(" current","");
                            head_divs[i].className = head_divs[i].className.replace(" current","");
                            // 將當前索引對應的元素設為顯示
                            if(head_divs[i] == this){
                                this.className += " current";
                                body_uls[i].className += " current";
                            }
                        }
                    }
                    //滑鼠移出事件
                    head_divs[i].onmouseout = function(){
                        //啟動定時器，恢復自動切換
                        timer = setInterval(autoChange,5000);
                    }
                }
                //定時器週期函式-tab欄自動切換
                function autoChange(){
                    //自增索引
                    ++current_index;
                    //當索引自增達到上限時，索引歸0
                    if( current_index == head_divs.length ){
                        current_index=0;
                    }
                    //當前背景顏色和邊框顏色
                    for(var i=0;i<head_divs.length;i++){
                        if(i == current_index){
                            head_divs[i].style.backgroundColor='#fff';
                            head_divs[i].style.borderBottom='1px solid #fff';
                        }else{
                            head_divs[i].style.backgroundColor='';
                            head_divs[i].style.borderBottom='';
                        }
                    }
                    //獲取所有tab-body-ul
                    var body_uls=document.getElementById("tab-body").getElementsByTagName("ul");
            
                    //遍歷元素
                    for(var i=0;i<body_uls.length;i++){
                        //將所有元素設為隱藏
                        body_uls[i].className = body_uls[i].className.replace(" current","");
                        head_divs[i].className = head_divs[i].className.replace(" current","");
                        // 將當前索引對應的元素設為顯示
                        if(head_divs[i] == head_divs[current_index]){
                            this.className += " current";
                            body_uls[i].className += " current";
                        }
                    }
                }
            }
        </script>
</head>
<style>
    body{font-size: 14px;font-family: "宋體";}
    body,ul,li{list-style: none;margin: 0;padding: 0;}
    /* 設定Tab整體大盒子 */
    .tab-box{
        width: 383px;
        margin: 10px;
        border: 1px solid #ccc;
        border-top: 2px solid #206F96;
    }
    /* 設定Tab欄選項樣式 */
    .tab-head{height: 31px;}
    .tab-head-div{
        width: 95px;
        height: 30px;
        float: left;
        border-bottom: 1px solid #ccc;
        border-right: 1px solid #ccc;
        background: #eee;
        line-height: 30px;
        text-align: center;
        cursor: pointer;
    }
    .tab-head .current{
        background: #fff;
        border-bottom: 1px solid #fff;
    }
    .tab-head-r{border-right: 0;}
    /* 設定tab欄選項內容樣式 */
    .tab-body-ul{
        display: none;
        margin: 20px 10px;
    }
    .tab-body-ul li{margin: 5px;}
    .tab-body .current{display: block;s}
</style>

<body>
    <div class="tab-box">
        <div class="tab-head" id="tab-head">
            <dic class="tab-head-div current" >網頁設計</dic>
            <dic class="tab-head-div">前端開發</dic>
            <dic class="tab-head-div">人工智慧</dic>
            <dic class="tab-head-div tab-head-r">電商運營</dic>
        </div>
        <div class="tab-body" id="tab-body">
            <ul class="tab-body-ul current">
                <li>HTML+CSS3網頁設計與製作</li>
                <li>網際網路產品設計思維與實踐</li>
                <li>Photoshop CS6 影像設計案例教程</li>
                <li>跨平臺UI設計寶典</li>
            </ul>
            <ul class="tab-body-ul">
                <li>javaScript+JQuery互動式web前端開發</li>
                <li>Vue.js前端開發實戰</li>
                <li>微信小程式開發實踐</li>
                <li>JavaScript前端開發案例教程</li>
            </ul>
            <ul class="tab-body-ul">
                <li>程式開發案例教程</li>
                <li>資料分析與應用</li>
                <li>實戰編輯</li>
                <li>快速程式設計入門</li>
            </ul>
            <ul class="tab-body-ul">
                <li>資料分析思維</li>
                <li>淘寶天貓</li>
                <li>淘寶天貓</li>
                <li>網路營銷文案</li>
            </ul>
        </div>
    </div>
</body>
</html>

相關文章