html兩種方法來實現tab切換效果

言辭111發表於2020-12-21
HTML

tab切換通過js和jQuery來實現，所有程式碼如下。

1.頁面切換效果通過js實現**

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul>li{
            background: blue;
            margin-top: 5px;
        }
        .active{
            background: orange;
        }
        #tab >div{
            display: none;  
        }
    </style>
</head>
<body>
    <ul id="ul">
        <li class="active">首頁</li>
        <li>錄入</li>
        <li>表格展示</li>
        <li>列表展示</li>
    </ul>
    <div id="tab">
        <div style="display: block;">首頁內容</div>
        <div>錄入內容</div>
        <div>表格展示內容</div>
        <div>列表展示內容</div>
    </div>
    <script>
        // 獲取所有li 
        var lisDom=document.getElementById("ul").children;
        // 獲取 所有div
        var tabDom=document.getElementById("tab").children;
        // console.log(lisDom)
        for(let i=0;i<lisDom.length;i++){
            // 迴圈 新增點選事件
            lisDom[i].onclick=function(){
                // alert(i) // 彈出當前點選li 的下標。
                //  去除 所有li class 樣式-選中背景，設定所有div 隱藏
                for(var j=0;j<lisDom.length;j++){
                    lisDom[j].removeAttribute("class");
                    tabDom[j].style.display="none";
                }
                // 當前點選的 li 新增 class 樣式-選中背景 
                lisDom[i].setAttribute("class","active");
                // 當前點選 li 對應的 div 顯示
                tabDom[i].style.display="block";
            }
        }
    </script>
</body>
</html>

2、jQuery實現tab切換

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./../jQuery.js"></script>
    <style>
        *{
            padding: 0;
            margin: 0;
            list-style: none;
        }
        ul{
            width: 500px;
            display: flex;
            margin: auto;
        }
        ul>li{
            margin-right: 20px;
        }
        #div{
            width: 500px;
            margin: auto;
            display: flex;
        }
        #div>div{
            margin-left: 50px;
        }
        .active{
            background: red;
        }
        #div>.show{
            display: inline-block;
        }
        #div>div{
            display: none;
        }
    </style>
</head>
<body>
    <ul id="ul">
        <li class="active">亞索</li>
        <li>劍聖</li>
        <li>諾克薩斯</li>
        <li>沙皇</li>
    </ul>
        <div id="div">
            <div class="show">面對疾風吧</div>
            <div>你的劍就是我的劍</div>
            <div>只有我才能帶領你走向勝利</div>
            <div>你們的皇帝回來了！！</div>
        </div>
    <script>
        $("#ul").on( "click","li",function(){
            // alert("點選了")
            var index=$(this).index();
            console.log(index);
            $(this).addClass("active");
            $(this).siblings().removeClass("active")
            $("#div>div").eq(index).addClass("show").siblings().removeClass("show")
        } )
    </script>
</body>
</html>

相關文章