分别用原生JS与jQuery 写简单选项卡

来源：互联网发布：统计学软件spss 编辑：程序博客网时间：2024/06/01 19:55
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>jquery选项卡</title>    <style type="text/css">    #div1 div{width: 200px;height: 200px;border: 1px red solid;display: none;}    .active{background:#999;}    </style>    <!-- 原生的JS -->    <script type="text/javascript">    window.onload=function(){        var oDiv=document.getElementById('div1');        var aInput=document.getElementsByTagName('input');        var aCon=oDiv.getElementsByTagName('div');        for (var i = 0; i < aInput.length; i++) {            aInput[i].index=i;            aInput[i].onclick=function(){                for (var i = 0; i < aInput.length; i++) {                    aInput[i].className='';                    aCon[i].style.display='';                }                this.className='active';                aCon[this.index].style.display='block';            }        }    }    </script>    <!-- jquery写法 -->    <script type="text/javascript" src='../jquery-3.2.1.min.js'></script>    <script type="text/javascript">    $(function(){        $('#div1').find('input').click(function(){            $('#div1').find('input').attr('class','');            $('#div1').find('div').css('display','none');            $(this).attr('class','active');            $('#div1').find('div').eq($(this).index()).css('display','block');        })    })    </script></head><body>    <div id="div1">        <input class="active" type="button" value="1">        <input type="button" value="2">        <input type="button" value="3">        <div style="display: block;">11111</div>        <div>22222</div>        <div>33333</div>    </div></body></html>
阅读全文
0 0