事件高级（二）

作者: Monee121 | 来源:发表于2018-04-19 17:03 被阅读0次

事件高级（二）
事件高级
事件高级
WebAPIs-事件
5.DOM:事件高级（注册事件、事件监听、解绑事件、 DOM事
04JavaScript-事件操作
事件高级一
事件机制（高级）
19 事件高级
DOM 高级事件

事件高级（二）

可重用的选项卡实例

<style>
#div1 input {background:#CCC;}
#div1 .active {background:yellow;}
#div1 div {width:200px; height:200px; background:#CCC; display:none;}
#div2 input {background:#CCC;}
#div2 .active {background:yellow;}
#div2 div {width:200px; height:200px; background:#CCC; display:none;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
window.onload=function ()
{
    tabSwitch('div1');
    tabSwitch('div2');
};

function tabSwitch(id)
{
    var oDiv=document.getElementById(id);
    var aBtn=oDiv.getElementsByTagName('input');
    var aDiv=oDiv.getElementsByTagName('div');
    var i=0;
    
    for(i=0;i<aBtn.length;i++)
    {
        aBtn[i].index=i;
        aBtn[i].onclick=function ()
        {
            for(i=0;i<aBtn.length;i++)
            {
                aBtn[i].className='';
                aDiv[i].style.display='none';
            }
            this.className='active';
            aDiv[this.index].style.display='block';
        };
    }
}
</script>
</head>

<body>
<div id="div1">
    <input class="active" type="button" value="教育" />
    <input type="button" value="财经" />
    <input type="button" value="aaa" />
    <div style="display:block;">1asdfasdfds</div>
    <div>2xzcvxzcv</div>
    <div>5332342345</div>
</div>

<div id="div2">
    <input class="active" type="button" value="教育" />
    <input type="button" value="财经" />
    <input type="button" value="aaa" />
    <div style="display:block;">1asdfasdfds</div>
    <div>2xzcvxzcv</div>
    <div>5332342345</div>
</div>
</body>