选项卡

雍机智
226 阅读2分钟 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选项卡</title>

    <style>
        *{
            margin:0;
            padding:0;
        }
        aside{
            float: left;
        }
        aside ul{
            list-style: none;
        }
        aside li{
            height:50px;
            width: 150px;
            text-align: center;
            line-height:50px;
        }
        aside li.active{
            background: salmon;
            font-weight: bold;
            font-size:20px;
        }

        section{
            float: left;
            margin-left:20px;
        }
        section div{
            height:300px;
            width: 600px;
            background:pink;
            display: none;
        }
        section div.active{
            display: block;
        }

    </style>

</head>
<body>
    <aside>
        <ul>
            <li cli="0" class="active">首页1</li>
            <li cli="1">首页2</li>
            <li cli="2">首页3</li>
        </ul>
    </aside>
    <section>
        <div class="active">
            <h4>首页1</h4>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. A vitae, omnis ipsum quidem doloribus, harum et soluta enim quod, hic animi fuga culpa repudiandae? Tempore recusandae perspiciatis quas culpa. Eaque!</p>
        </div>
        <div>
            <h4>首页2</h4>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. A vitae, omnis ipsum quidem doloribus, harum et soluta enim quod, hic animi fuga culpa repudiandae? Tempore recusandae perspiciatis quas culpa. Eaque!</p>
        </div>
        <div>
            <h4>首页3</h4>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. A vitae, omnis ipsum quidem doloribus, harum et soluta enim quod, hic animi fuga culpa repudiandae? Tempore recusandae perspiciatis quas culpa. Eaque!</p>
        </div>
    </section>

    <script>
        var lis=document.getElementsByTagName("li"),
            divs=document.getElementsByTagName("div");

        for(var i=0;i<lis.length;i++){
            lis[i].onclick=function(){
                for(var j=0;j<lis.length;j++){
                    lis[j].className="";
                    divs[j].className="";
                }

                var j=this.getAttribute("cli");
                divs[j].className="active";
                this.className="active"
            }

        }

    </script>
</body>
</html>

封装对象版选项卡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选项卡</title>

    <style>
        *{
            margin:0;
            padding:0;
        }
        aside{
            float: left;
        }
        aside ul{
            list-style: none;
        }
        aside li{
            height:50px;
            width: 150px;
            text-align: center;
            line-height:50px;
        }
        aside li.active{
            background: salmon;
            font-weight: bold;
            font-size:20px;
        }

        section{
            float: left;
            margin-left:20px;
        }
        section div{
            height:300px;
            width: 600px;
            background:pink;
            display: none;
        }
        section div.active{
            display: block;
        }

    </style>

</head>
<body>
    <aside>
        <ul>
            <li cli="0" class="active">首页1</li>
            <li cli="1">首页2</li>
            <li cli="2">首页3</li>
        </ul>
    </aside>
    <section>
        <div class="active">
            <h4>首页1</h4>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. A vitae, omnis ipsum quidem doloribus, harum et soluta enim quod, hic animi fuga culpa repudiandae? Tempore recusandae perspiciatis quas culpa. Eaque!</p>
        </div>
        <div>
            <h4>首页2</h4>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. A vitae, omnis ipsum quidem doloribus, harum et soluta enim quod, hic animi fuga culpa repudiandae? Tempore recusandae perspiciatis quas culpa. Eaque!</p>
        </div>
        <div>
            <h4>首页3</h4>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. A vitae, omnis ipsum quidem doloribus, harum et soluta enim quod, hic animi fuga culpa repudiandae? Tempore recusandae perspiciatis quas culpa. Eaque!</p>
        </div>
    </section>

    <script>
        var tab={
            "lis":document.getElementsByTagName("li"),
            "divs":document.getElementsByTagName("div"),
            "init":function(){
                this.bind();
            },
            "bind":function(){
                var me=this;
                for(var i=0;i<this.lis.length;i++){
                    this.lis[i].onclick=function(){
                        me.animate(this)
                    }
                }
            },
            "animate":function(li){
                this.clear();
                li.className="active";
                var i=li.getAttribute("cli");
                this.divs[i].className="active";
            },
            "clear":function(){
                for(var i=0;i<this.lis.length;i++){
                    this.lis[i].className="";
                    this.divs[i].className="";
                }
            }
        }

        tab.init();

    </script>

</body>
</html>

面向对象选项卡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选项卡</title>

    <style>
        *{
            margin:0;
            padding:0;
        }
        aside{
            float: left;
        }
        aside ul{
            list-style: none;
        }
        aside li{
            height:50px;
            width: 150px;
            text-align: center;
            line-height:50px;
        }
        aside li.active{
            background: salmon;
            font-weight: bold;
            font-size:20px;
        }

        section{
            float: left;
            margin-left:20px;
        }
        section div{
            height:300px;
            width: 600px;
            background:pink;
            display: none;
        }
        section div.active{
            display: block;
        }

    </style>

</head>
<body>
    <div class="tab">
        <aside>
            <ul>
                <li cli="0" class="active">首页1</li>
                <li cli="1">首页2</li>
                <li cli="2">首页3</li>
            </ul>
        </aside>
        <section>
            <div class="active">
                <h4>首页1</h4>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. A vitae, omnis ipsum quidem doloribus, harum et soluta enim quod, hic animi fuga culpa repudiandae? Tempore recusandae perspiciatis quas culpa. Eaque!</p>
            </div>
            <div>
                <h4>首页2</h4>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. A vitae, omnis ipsum quidem doloribus, harum et soluta enim quod, hic animi fuga culpa repudiandae? Tempore recusandae perspiciatis quas culpa. Eaque!</p>
            </div>
            <div>
                <h4>首页3</h4>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. A vitae, omnis ipsum quidem doloribus, harum et soluta enim quod, hic animi fuga culpa repudiandae? Tempore recusandae perspiciatis quas culpa. Eaque!</p>
            </div>
        </section>
    </div>
    <div class="tab">
        <aside>
            <ul>
                <li cli="0" class="active">首页1</li>
                <li cli="1">首页2</li>

            </ul>
        </aside>
        <section>
            <div class="active">
                <h4>首页1</h4>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. A vitae, omnis ipsum quidem doloribus, harum et soluta enim quod, hic animi fuga culpa repudiandae? Tempore recusandae perspiciatis quas culpa. Eaque!</p>
            </div>
            <div>
                <h4>首页2</h4>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. A vitae, omnis ipsum quidem doloribus, harum et soluta enim quod, hic animi fuga culpa repudiandae? Tempore recusandae perspiciatis quas culpa. Eaque!</p>
            </div>
        </section>
    </div>
    <div class="tab">
        <aside>
            <ul>
                <li cli="0" class="active">首页1</li>
                <li cli="1">首页2</li>
                <li cli="2">首页3</li>
                <li cli="3">首页4</li>
            </ul>
        </aside>
        <section>
            <div class="active">
                <h4>首页1</h4>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. A vitae, omnis ipsum quidem doloribus, harum et soluta enim quod, hic animi fuga culpa repudiandae? Tempore recusandae perspiciatis quas culpa. Eaque!</p>
            </div>
            <div>
                <h4>首页2</h4>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. A vitae, omnis ipsum quidem doloribus, harum et soluta enim quod, hic animi fuga culpa repudiandae? Tempore recusandae perspiciatis quas culpa. Eaque!</p>
            </div>
            <div>
                <h4>首页3</h4>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. A vitae, omnis ipsum quidem doloribus, harum et soluta enim quod, hic animi fuga culpa repudiandae? Tempore recusandae perspiciatis quas culpa. Eaque!</p>
            </div>
            <div>
                <h4>首页4</h4>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. A vitae, omnis ipsum quidem doloribus, harum et soluta enim quod, hic animi fuga culpa repudiandae? Tempore recusandae perspiciatis quas culpa. Eaque!</p>
            </div>
        </section>
    </div>

    <script> 
        function tabs(parent){
            this.lis=parent.getElementsByTagName("li");
            this.divs=parent.getElementsByTagName("div");
        }
        tabs.prototype.init=function(){
            this.bind();
        }
        tabs.prototype.bind=function(){
            var me=this;
            for(var i=0;i<this.lis.length;i++){
                this.lis[i].onclick=function(){
                    me.animate(this)
                }
            }
        }
        tabs.prototype.animate=function(li){
            this.clear();
            li.className="active";
            var i=li.getAttribute("cli");
            this.divs[i].className="active";
        }
        tabs.prototype.clear=function(){
            for(var i=0;i<this.lis.length;i++){
                this.lis[i].className="";
                this.divs[i].className="";
            }
        }

        var tab=document.getElementsByClassName("tab");

        var tabs1=new tabs(tab[0]);
        tabs1.init();

        var tabs2=new tabs(tab[1]);
        tabs2.init();

        var tabs3=new tabs(tab[2]);
        tabs3.init();
    </script>

</body>
</html>
avatar
文章
阅读
粉丝