js选项卡

来源：互联网发布：wow60数据库编辑：程序博客网时间：2024/06/06 03:35

<head>    <meta charset="UTF-8">    <title></title>    <style type="text/css">             #div1 .active {            background: yellow;        }        #div1 div {            width: 200px;            height: 200px;            background: #ccc;            display: none;        }    </style>    <script>        window.onload = function() {            var oDiv = document.getElementById('div1');            var aCh = oDiv.getElementsByTagName('input');            var aDiv = oDiv.getElementsByTagName('div');            for(var i = 0; i < aCh.length; i++)             {                aCh[i].index=i;                aCh[i].onclick = function()                 {                    for (var i=0;i<aCh.length;i++)                     {                        aCh[i].className='';                        aDiv[i].style.display='none';                    }                    this.className='active';                    aDiv[this.index].style.display='block';                };            }        };    </script></head><body>    <div id="div1">        <input type="button" name="" class="active" value="选项1" />        <input type="button" name="" id="ipt2" value="选项2" />        <input type="button" name="" id="ipt3" value="选项3" />        <input type="button" name="" id="ipt4" value="选项4" />        <div style="display: block;">111111</div>        <div>222222</div>        <div>333333</div>        <div>444444</div>    </div></body>

知识点：wind.onload 网页加载完成才执行脚本
自定义属性（index）使用之前最好先定义，避免不同浏览器的兼容问题
this属性：this属性表示当前对象，如果在全局作用范围内使用this，则指代当前页面对象window；如果在函数中使用this，则this指代什么是根据运行时此函数在什么对象上被调用。
className
getElementsByTagName

0 0