原生js面向对象编程-选项卡(点击) 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>原生js面向对象选项卡(点击)</title>
    <style>
        #div1 div{
            width:400px;
            height:300px;
            border:1px solid #ccc;
            overflow: hidden;
            display: none;
            margin: 15px 0;
        }
        #div1 input{
            color: #fff;
            width:100px;
            height:40px;
            background: darkseagreen;
            border:none;
            font-size: 14px;
            letter-spacing: 5px;
        }
        #div1 p{
            font-size: 20px;
            line-height: 24px;
            text-align: center;
            color:darkgreen;
        }
        #div1 .title{
            padding: 0;
            font-weight: bold;
        }
        #div1 .active{
            background:sandybrown;
            color:#fff;
        }
    </style>
</head>
<body>
<div id="div1">
    <input class="active" type="button" value="五言律诗">
    <input type="button" value="七言律诗">
    <input type="button" value="五言绝句">
    <input type="button" value="七言绝句">
    <div style="display: block;">
        <p class="title">落 花</p>
        <p class="author">李商隐</p>
        <p>高阁客竟去，小园花乱飞。</p>
        <p>参差连曲陌，迢递送斜晖。</p>
        <p>肠断未忍扫，眼穿仍欲归。</p>
        <p>芳心向春尽，所得是沾衣。</p>
    </div>
    <div>
        <p class="title">蜀 相</p>
        <p class="author">杜甫</p>
        <p>丞相祠堂何处寻，锦官城外柏森森。</p>
        <p>映阶碧草自春色，隔叶黄鹂空好音。</p>
        <p>三顾频烦天下计，两朝开济老臣心。</p>
        <p>出师未捷身先死，长使英雄泪满襟。</p>
    </div>
    <div>
        <p class="title">八阵图</p>
        <p class="author">杜甫</p>
        <p>功盖三分国，名成八阵图。</p>
        <p>江流石不转，遗恨失吞吴。</p>
    </div>
    <div>
        <p class="title">泊秦淮</p>
        <p class="author">杜牧</p>
        <p>烟笼寒水月笼沙，夜泊秦淮近酒家。</p>
        <p>商女不知亡国恨，隔江犹唱后庭花。</p>
    </div>
</div>

<script type="text/javascript">
    window.onload = function(){

        function Tab(id){
            this.wrap = document.getElementById(id);
            this.inp = this.wrap.getElementsByTagName('input');
            this.div = this.wrap.getElementsByTagName('div');
        }

        Tab.prototype = {
            constructor : Tab,
            tabmove : function(){
                var This = this;
                for(var i=0;i<this.inp.length;i++){
                    this.inp[i].index = i;
                    this.inp[i].onclick =  function(){
                        This.tabs(this)
                    }
                }
            },
            tabs:function(obj){
                for(var i=0;i<this.inp.length;i++){
                    this.inp[i].className = '';
                    this.div[i].style.display = 'none';
                }
                this.inp[obj.index].className = 'active';
                this.div[obj.index].style.display = 'block';
            }
        }

        var t = new Tab('div1');
        t.tabmove();


    }
</script>

</body>
</html>

 

posted @ 2018-11-02 17:45  雅士伊人  阅读(265)  评论(0)    收藏  举报