html两种方法来实现tab切换效果

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>

你可能感兴趣的:(js,html,css,js,html)