tab栏切换练习

绝地灬酷狼 2022-11-24 12:56 199阅读 0赞

![在这里插入图片描述][20200806104510340.gif]

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title></title> <style> ul { 
                list-style-type: none;
                clear: both;
                overflow: hidden;
            }
            
            header ul li { 
                float: left;
                width: 19%;
                height: 50px;
                text-align: center;
                line-height: 50px;
                color: aliceblue;
                font-size: 24px;
                font-weight: 400;
                margin: 5px;
                background-color: skyblue;
                border-radius: 25px;
                cursor: pointer;
            }
            
            header li:hover { 
                box-shadow: 2px 2px 2px #ccc;
            }
            
            article { 
                width: 1200 px;
                margin: 0 auto;
            }
            
            article div { 
                width: 100%;
                height: 300px;
                text-align: center;
                line-height: 300px;
                margin: 0 auto;
                text-shadow: 2px 2px aqua;
                border: 1px solid #ccc;
                background-color: #f5f5f5;
            }
        </style>
    </head>
    
    <body>
        <header>
            <ul>
                <li> 首页 </li>
                <li>人员管理</li>
                <li>报修管理</li>
                <li>房间管理</li>
                <li> 设置 </li>
            </ul>
        </header>
        <article>
            <div class="index">首页</div>
            <div class="hr">人员</div>
            <div class="ripear">维修</div>
            <div class="room">房间管理</div>
            <div class="setting">设置</div>
        </article>
        <ul>
    </body>
    <script>
        var article = document.querySelector('article');
        var nav = document.querySelectorAll('li');
        console.log(article.children);
        for (var i = 1; i < article.children.length; i++) { 
            article.children[i].style.display = 'none';
        }
        for (var i = 0; i < nav.length; i++) { 
            nav[i].setAttribute('index', i); nav[i].onclick = function() { 
                for (var i = 0; i < article.children.length; i++) { 
                    article.children[i].style.display = 'none';
                }
                article.children[this.getAttribute('index')].style.display = 'block';
            }
        }
    </script>
    
    </html>

[20200806104510340.gif]: /images/20221124/0cfc27cb5f314cd8a25fd560d01234ba.png