javascript 简易选项卡-蒲公英云

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>