选项卡

作者: z_j_r | 来源:发表于2017-10-31 13:46 被阅读0次

    前言:

    蝴蝶如要在百花园里得到飞舞的欢乐,那首先得忍受与蛹决裂的痛苦

    --------------------------------正文---------------------------------

    js代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            .box input{
                background: #ccc;
            }
            .box input.active{
                background: #f90;
            }
            .box div{
                width: 200px;
                height: 200px;
                background: #ccc;
                display: none;
            }
            .box div.active{
                display: block;
            }
        </style>
        <script>
            window.onload = function(){
                function slider(id,sEv){
                    var oTab = document.getElementById(id);
                    var aBtn = oTab.getElementsByTagName('input');
                    var aDiv = oTab.getElementsByTagName('div');
                    for(var i=0;i<aBtn.length;i++){
                        aBtn[i].index = i;
                        aBtn[i][sEv] = function(){
                            for(var i=0;i<aBtn.length;i++){
                                aBtn[i].className = '';
                                aDiv[i].className = '';
                            }
                            this.className = 'active';
                            aDiv[this.index].className = 'active';
                        };
                    }
                }
                slider('tab','onclick');
                slider('tab2','onmouseover');
            };
        </script>
    </head>
    <body>
        <div id="tab" class="box">
            <input type="button" value="科技" class="active" />
            <input type="button" value="娱乐" />
            <input type="button" value="军事" />
            <div class="active">科技的内容</div>
            <div>娱乐的内容</div>
            <div>军事的内容</div>
        </div>
        <div id="tab2" class="box">
            <input type="button" value="呵呵" class="active" />
            <input type="button" value="呵呵2" />
            <input type="button" value="呵呵3" />
            <div class="active">111</div>
            <div>222</div>
            <div>333</div>
        </div>
    </body>
    </html>
    

    jquery代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            .tab{
                width: 200px;
            }
            .tab input{
                background: #ccc;
            }
            .tab input.active{
                background: #f90;
            }
            .tab div{
                width: 200px;
                height: 200px;
                background: #ccc;
                display: none;
            }
            .tab div.on{
                display: block;
            }
        </style>
        <script src="js/jquery-1.9.1.min.js"></script>
        <script src="js/cookie.js"></script>
    </head>
    <body>
        <div class="tab">
            <input type="button" value="aaa" class="active" />
            <input type="button" value="bbb" />
            <input type="button" value="ccc" />
            <div class="on">111</div>
            <div>222</div>
            <div>333</div>
        </div>
        <script>
            $(document).ready(function(){
                $('.tab').on('click','input',function(){
                    iNow = $(this).index();
                    changeTab();
                });
                function changeTab(){
                    $('.tab input').siblings('input').removeClass('active');
                    $('.tab input').eq(iNow).addClass('active');
                    $('.tab div').removeClass('on');
                    $('.tab div').eq(iNow).addClass('on');
                }
            });
        </script>
    </body>
    </html>
    

    相关文章

      网友评论

          本文标题:选项卡

          本文链接:https://www.haomeiwen.com/subject/ytlbpxtx.html