javascript 简易选项卡

刺骨的言语ヽ痛彻心扉 2021-11-23 00:08 301阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc5NzE4Mg_size_16_color_FFFFFF_t_70]

<!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>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc5NzE4Mg_size_16_color_FFFFFF_t_70]: /images/20211122/b7f8fced80f646298f31d1731c60bcf0.png