js实现tab切换的几种方法（选项卡）

最新推荐文章于 2024-06-02 20:46:35 发布

小璐啊

最新推荐文章于 2024-06-02 20:46:35 发布

阅读量2.8k

点赞数 1

文章标签： html5 css html

本文链接：https://blog.csdn.net/m0_48353529/article/details/119969551

版权

方法一：这种方法运用了this关键字，但是由于事件是异步操作，所以在写的时候要在事件内部接收一下全局变量i

<!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>
        .box {
            width: 500px;
            height: 300px;
            border: 1px solid #000;
            margin: 50px auto;
        }
        
        .box ul,
        .box ol {
            list-style-type: none;
            padding: 0;
            margin: 0;
        }
        
        .box ul {
            height: 50px;
            background-color: pink;
            display: flex;
            justify-content: space-around;
            align-items: center;
        }
        
        .box ul li {
            width: 100px;
            height: 30px;
            text-align: center;
            line-height: 30px;
        }
        
        .box ul li.active {
            background-color: #ff0;
        }
        
        .box ol li a img {
            width: 500px;
            height: 250px;
        }
        
        .box ol li {
            display: none;
        }
        
        .box ol li.active {
            display: block;
        }
        
        .box {
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div class="box">
        <ul>
            <li class="active">1</li>
            <li>2</li>
            <li>3</li>
        </ul>
        <ol>
            <li class="active">
                <a href="">
                    <img src="img/7.jpg" alt="">
                </a>
            </li>
            <li>
                <a href="">
                    <img src="img/6.jpg" alt="">
                </a>
            </li>
            <li>
                <a href="">
                    <img src="img/5.jpg" alt="">
                </a>
            </li>
        </ol>
    </div>
</body>
<script>
    //点击某一个的时候进行切换图片
    //1.获取元素
    var li = document.querySelectorAll('ul li')
    console.log(li);
    var ol = document.querySelectorAll('ol li')
        //遍历Li
    for (var i = 0; i < li.length; i++) {
        //点击某一个li的时候，给某一个Li一个class属性值active,变为黄色
        //给当前的数组一个属性，属性值为下标
        li[i].index = i
        li[i].onclick = function() {
            //点击之后，将所有的点击的属性去掉
            for (var j = 0; j < li.length; j++) {
                li[j].className = ''
            }
            //给点击的那一个tab变为active
            this.className = 'active';
            //循环在点击的时候，把所有的图片消失，就是没有active属性
            for (var j = 0; j < ol.length; j++) {
                ol[j].className = ''
            }
            //获取到当前点击的是哪一个，对应的Ol显示图片
            var index = this.index //获取当前元素的index属性值
            ol[index].className = 'active'
        }

    }
</script>

</html>

方法二：使用let定义变量

<!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>
        .box {
            height: 430px;
            width: 500px;
            border: solid 1px black;
            overflow: hidden;
            margin: auto;
        }
        
        .box ul,
        .box ol {
            list-style: none;
            padding: 0;
            margin: 0;
            width: 500px;
        }
        
        .box ul {
            height: 30px;
            background-color: antiquewhite;
            line-height: 30px;
            display: flex;
            justify-content: space-around;
            color: rgb(22, 117, 117);
        }
        
        .box ul li {
            width: 150px;
            background-color: rgb(240, 240, 121);
            text-align: center;
        }
        
        .box ul li.active {
            background-color: gray;
        }
        
        .box ol {
            height: 400px;
        }
        
        .box ol li {
            display: none;
        }
        
        .box ol li.active {
            display: block;
        }
        
        .box ol li img {
            width: 500px;
            height: 400px;
        }
    </style>
</head>

<body>
    <div class="box">
        <ul>
            <li class="active">绿色</li>
            <li>粉色</li>
            <li>蓝色</li>
        </ul>
        <ol>
            <li class="active"><img src="img/1.jpg" alt=""></li>
            <li><img src="img/2.jpg" alt=""></li>
            <li><img src="img/3.jpg" alt=""></li>
        </ol>
    </div>
</body>
<script>
    //方法二：通过找下标，轮到哪一个让哪一个下标所在的图片显示
    var ul = document.querySelectorAll('.box ul li')
    var ol = document.querySelectorAll('.box ol li')
        //这次找下标不用this关键字，而是使用let定义变量
        //    let在for循环if中定义的变量会将自己的作用域限制在大括号中
    for (let i = 0; i < ul.length; i++) {
        ul[i].onclick = function() {
            for (let i = 0; i < ul.length; i++) {
                ul[i].className = ''
                ol[i].className = ''
            }
            ul[i].className = 'active'
            ol[i].className = 'active'
        }
    }
</script>

</html>

方法三：当我们使用forEach方法的时候，就会有一个下标index 就不需要再设置

<!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>
        .box {
            height: 430px;
            width: 500px;
            border: solid 1px black;
            overflow: hidden;
            margin: auto;
        }
        
        .box ul,
        .box ol {
            list-style: none;
            padding: 0;
            margin: 0;
            width: 500px;
        }
        
        .box ul {
            height: 30px;
            background-color: antiquewhite;
            line-height: 30px;
            display: flex;
            justify-content: space-around;
            color: rgb(22, 117, 117);
        }
        
        .box ul li {
            width: 150px;
            background-color: rgb(240, 240, 121);
            text-align: center;
        }
        
        .box ul li.active {
            background-color: gray;
        }
        
        .box ol {
            height: 400px;
        }
        
        .box ol li {
            display: none;
        }
        
        .box ol li.active {
            display: block;
        }
        
        .box ol li img {
            width: 500px;
            height: 400px;
        }
    </style>
</head>

<body>
    <div class="box">
        <ul>
            <li class="active">绿色</li>
            <li>粉色</li>
            <li>蓝色</li>
        </ul>
        <ol>
            <li class="active"><img src="img/1.jpg" alt=""></li>
            <li><img src="img/2.jpg" alt=""></li>
            <li><img src="img/3.jpg" alt=""></li>
        </ol>
    </div>
</body>
<script>
    //方法四：通过找下标，轮到哪一个让哪一个下标所在的图片显示
    var ul = document.querySelectorAll('.box ul li')
    var ol = document.querySelectorAll('.box ol li')
    ul.forEach(function(item, index) {
        //点击ul的时候，切换
        ul[index].onclick = function() {
            ul.forEach(function(item, index) {
                ul[index].className = ''
                ol[index].className = ''
            })
            item.className = 'active'
            ol[index].className = 'active'
        }
    })
</script>

</html>

小璐啊

关注

1
点赞
踩
17

收藏

觉得还不错? 一键收藏
1
评论
js实现tab切换的几种方法（选项卡）

方法一：这种方法运用了this关键字，但是由于事件是异步操作，所以在写的时候要在事件内部接收一下全局变量i<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=
复制链接

扫一扫