Object-oriented tabs

<!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>
        .cont{width:400px;height:300px;border: solid 1px black;margin: 30px auto;}
        .cont ul{margin: 0;padding: 0;list-style: none;display: flex;height: 40px;line-height: 40px;text-align: center;background: #eee;border-bottom: solid 1px black;}
        .cont li{flex: 1;border-right: solid 1px black;}
        .cont li.active{background: red}

        .box p{margin: 0;height: 259px;display: none}
        .box p.active{display: block;}
        .box p:nth-child(1){background: #0a0}
        .box p:nth-child(2){background: #aa0}
        .box p:nth-child(3){background: #0aa}
    </style>
</head>
<body>
    <div class="cont">
        <ul><li class="active">1</li><li>2</li><li>3</li></ul>
        <div class="box">
            <p class="active">内容1内容1内容1内容1内容1内容1</p>
            <p>内容2</p>
            <p>内容3333333333</p>
        </div>
    </div>
</body>
<script>

    // OOA：分析
    //     Tab: click the button, switching the corresponding content 
    //      1. Select element 
    //      2. binding events 
    //      3. Click the index to find the elements 
    //      The index display contents 

    // OOD: Design 
    // function the Tab () { 
    //      // 1. selected elements 
    //      // 2. binding events 
    // } 
    // Tab.prototype.init = function () { 
    //      // begin binding, binding good after a, is triggered 
    //          // Get the index 3. click element 
    //          // the index display content 
    // } 
    // Tab.prototype.display = function () { 
    //      // display the pictures 
    / / } 

    // of OOP: programming (the filling Code) 
    functionNa'tab'al () {
         // 1. element selected from 
        the this .li = document.querySelectorAll ( "CONT Li." );
         The this .p = document.querySelectorAll ( "CONT P." );
         // 2. binding events 
        the this .init (); 
    } 
    Tab.prototype.init = function () {
         var that = the this ;
         // after the start of binding, better binding, is triggered 
        for ( var I = 0; I < the this .li.length; I ++ ) {
             the this .li [I] .index = I;
             the this .li [I] = .onclick function() {
                 // 3. Click the elements to find the index 
                that.abc = the this .index; // the index is clicked 
                // 4. The index, according to the display content 
                that.display (); 
            } 
        } 
    } 
    Tab.prototype. the display = function () {
         // display the pictures 
        for ( var I = 0; I < the this .li.length; I ++ ) {
             the this .li [I] .className = "" ;
             the this .p [I] = .className " " ; 
        } 
        the this .li [ the this.abc].className = "active";
        this.p[this.abc].className = "active";
    }

    new Tab();

</script>
</html>
Object-oriented tabs

Guess you like
