tab切换，原生js

最新推荐文章于 2022-11-16 10:40:45 发布

7cccccc

最新推荐文章于 2022-11-16 10:40:45 发布

阅读量466

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/qq_45952585/article/details/121422473

版权

tab切换，原生js

第一种方式
第二种方式

第一种方式

    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .big {
            width: 900px;
            height: 600px;
            margin: 0 auto;
        }

        ul {
            list-style: none;
            overflow: hidden;
            width: 300px;
            height: 20px;
            margin: 0 auto;
            margin-bottom: 30px;
        }

        li {
            float: left;
            margin-left: 40px;
            cursor: pointer;
        }

        img {
            width: 800px;
            height: 500px;
            margin-left: 50px;
            display: none;

        }

        .red {
            color: pink;
        }

        .active {
            display: block;
        }
    </style>
    <body>
    <div class="big">
        <ul id="ul">
            <li class="red">图片一</li>
            <li>图片二</li>
            <li>图片三</li>
        </ul>
        <!-- 图片随便找三张尺寸大点的图片，是尺寸大点，不是尺度大点，如果是尺度大点，请私信发我看下，嘿嘿嘿 -->
        <div id="picture">
            <img src="./img/1.jpg" alt="" class="active">
            <img src="./img/2.jpg" alt="">
            <img src="./img/3.jpg" alt="">
        </div>
    </div>
    <script>
        var ul = document.getElementById('ul');
        var li = document.getElementsByTagName('li');
        var img = document.getElementsByTagName('img');
        for (var i = 0; i < li.length; i++) {
            li[i].index = i
            li[i].onclick = function () {
                for (var m = 0; m < li.length; m++) {
                    li[m].removeAttribute('class')
                    img[m].removeAttribute('class')
                }
                this.setAttribute('class', 'red')
                img[this.index].setAttribute('class', 'active')
            }
        }
    </script>
</body>

第二种方式

在这里插入图片描述

    <style>
        ul {
            overflow: hidden;
            list-style: none;
        }

        li {
            float: left;
            margin-left: 20px;
        }

        .red {
            color: red;
        }

        p {
            display: none;
        }

        .active {
            display: block;
        }
    </style>
    <body>
    <ul id="tit">
        <li class="red" onclick="tab(0)">标题1</li>
        <li onclick="tab(1)">标题2</li>
        <li onclick="tab(2)">标题3</li>
    </ul>
    <div id="con">
        <p class="active">内容一</p>
        <p>内容二</p>
        <p>内容三</p>
    </div>
    <script>
        var li = document.getElementsByTagName('li')
        var p = document.getElementsByTagName('p')
        function tab(i) {
            for (var j = 0; j < li.length; j++) {
                li[j].setAttribute('class', '')
                p[j].setAttribute('class', '')
            }
            li[i].setAttribute('class', 'red')
            p[i].setAttribute('class','active')
        }
    </script>
</body>

肯定还有其他比较好的方法，可以提出来，欢迎来搞，感谢支持!!!

7cccccc

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
tab切换，原生js

tab切换，原生js第一种方式第二种方式第一种方式 <style> * { padding: 0; margin: 0; } .big { width: 900px; height: 600px; margin: 0 auto; } ul { list-sty
复制链接

扫一扫

tab切换，原生js

tab切换，原生js

第一种方式

第二种方式

“相关推荐”对你有帮助么？