javascript 简易选项卡

在这里插入图片描述


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>选项卡</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #tab {
            list-style: none;
            display: flex;
            background: rgb(245, 242, 242);
        }

        #outer {
            width: 300px;
            height: 250px;
            border: 1px solid #000;
        }

        #tab>li {
            padding: 10px;
            cursor: pointer;
        }

        img {
            width: 300px;
            height: 200px;
            display: block;
        }

        #content>div {
            display: none;
        }

        #content .show_img {
            display: block;
        }

        #tab .current {
            background: rgb(197, 193, 193);
        }
    </style>
</head>

<body>
    <div id="outer">
        <ul id="tab">
            <li class="current">第一课</li>
            <li>第二课</li>
            <li>第三课</li>
        </ul>
        <div id="content">
            <div class="show_img"><img src="img/w7.jpg" alt="此处可用其他东西代替"></div>
            <div><img src="img/w8.jpg" alt="此处可用其他东西代替"></div>
            <div><img src="img/w9.jpg" alt="此处可用其他东西代替"></div>
        </div>
    </div>
    <script>
        var allLi = document.querySelectorAll('#tab li');
        var show = document.querySelectorAll('#content>div');
        for (var i = 0; i < allLi.length; i++) {
            allLi[i].index = i;
            allLi[i].onmousemove = function () {
                for (var i = 0; i < allLi.length; i++) {
                    allLi[i].className = '';
                    this.className = 'current';
                }
                for (var n = 0; n < show.length; n++) {
                    show[n].style.display = 'none';
                    show[this.index].style.display = 'block';
                }


            }
        }
    </script>
</body>

</html>
posted @ 2022-04-02 09:48  coderwcb  阅读(50)  评论(0)  编辑  收藏  举报