zoukankan      html  css  js  c++  java
  • JS案例--Tab栏切换

    <!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>Document</title>
    
        <style>
            * {
                margin: 0;
                padding: 0;
            }
    
            ul,
            ol,
            li {
                list-style: none;
            }
    
            .container {
                width: 600px;
                height: 400px;
                border: 10px solid #333;
                margin: 30px auto;
                display: flex;
                flex-direction: column;
            }
    
            .container>ul {
                width: 100%;
                height: 40px;
                display: flex;
            }
    
            .container>ul>li {
                flex: 1;
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 30px;
                color: #fff;
                background-color: hotpink;
            }
    
            .container>ul>li.active {
                background-color: orange;
            }
    
            .container>ol {
                flex: 1;
                position: relative;
            }
    
            .container>ol>li {
                width: 100%;
                height: 100%;
                position: absolute;
                top: 0;
                left: 0;
    
                background-color: skyblue;
    
                color: #fff;
                font-size: 100px;
                display: flex;
                justify-content: center;
                align-items: center;
    
                display: none;
            }
    
            .container>ol>li.active {
                display: flex;
            }
        </style>
    </head>
    
    <body>
    
        <div class="container">
            <ul>
                <li class="active">1</li>
                <li id="1">2</li>
                <li id="1">3</li>
            </ul>
            <ol>
                <li class="active">1</li>
                <li>2</li>
                <li>3</li>
            </ol>
        </div>
    
    
        <script>
    
            function Tab(lab){
                // 获取页面元素
                this.ulLiObj = lab.querySelectorAll('ul > li');
                this.olLiObj = lab.querySelectorAll('ol > li');
            }
    
            Tab.prototype.tab =   function () {
                // 常量定义,用户无法修改
                const _this = this;
                // ulli添加点击事件
                this.ulLiObj.forEach((item, index) => {
                    item.addEventListener('click', () => {
                        // 去除其他liclass属性
                        _this.ulLiObj.forEach((ele, index) => {
                            ele.removeAttribute('class');
                            // 去除对应olli的class
                            _this.olLiObj[index].removeAttribute('class');
                        })
                        // 给自己添加class
                        item.setAttribute('class', 'active');
                        // 给对应olli添加class
                        _this.olLiObj[index].setAttribute('class', 'active')
                    })
                })
            }
    
            let divObj = document.querySelector('.container');
            let tab1 = new Tab(divObj);
            tab1.tab();
    
    
        </script>
    </body>
    
    </html>
  • 相关阅读:
    树莓派研究笔记(2)-- 安装Nginx 服务器,PHP 和 SQLite
    树莓派研究笔记(1)-- 安装Mono
    Qemu虚拟机 玩树莓派最新版系统 (截止2017-04-10)
    CLRInjection
    CLRMonitor
    Xamarin Mono for VS开发窗体标题(Title)乱码解决方案
    精美3D中国象棋
    怀旧系列(5)----大学时代的疯狂
    怀旧系列(4)----文曲星编程GV-Basic
    怀旧系列(3)----Pascal
  • 原文地址:https://www.cnblogs.com/CGWTQ/p/11675470.html
Copyright © 2011-2022 走看看