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

最新推荐文章于 2023-10-03 15:35:56 发布

言辞I

最新推荐文章于 2023-10-03 15:35:56 发布

阅读量7.9k

点赞数 8

分类专栏： js html 文章标签： css js html

本文链接：https://blog.csdn.net/w1666793979/article/details/111500722

版权

js 同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

html

6 篇文章 0 订阅

订阅专栏

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>

言辞I

关注

8
点赞
踩
22

收藏

觉得还不错? 一键收藏
7
评论
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>
复制链接

扫一扫