js 选项卡切换-蒲公英云

js 选项卡切换

通过按钮来切换div

先将div隐藏，只显示第一个按钮为高亮，将div隐藏显示第一个div

通过js给按钮设置事件，通过点击的是哪一个按钮来设置其可见和高亮

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
#div1 div{
    display:none;
    width:300px;
    height:300px;
    background:#396;
}
#div1 .active{
    background:#0F0;
}
</style>
</head>
<script>
window.onload = function()
{
    alert('aaa');
    var div1 = document.getElementById('div1'); //返回一个指定id 的对象的引用
    var btn = div1.getElementsByTagName('input'); //返回指定标签的对象集合
    var divarr = div1.getElementsByTagName('div');
    for (var i=0; i<btn.length; i++) //此循环给按钮注册事件
    {
        btn[i].id = i;
        btn[i].onclick = function()
        {
            for(var j=0; j<btn.length; j++){//清空所有效果
                btn[j].className=''; //将其class设为空，
                divarr[j].style.display='none'; //设为不可见
            }
            this.className = 'active';//给选中的添加效果
            divarr[this.id].style.display='block';
        };
    } 
};
</script>
<body>
<div id="div1">
    <input class="active" type="button" value="早上"/>
    <input type="button" value="中午"/>
    <input type="button" value="下午"/>
    <input type="button" value="晚上"/><br />
    <div style="display:block;">111</div>
    <div>222</div>
    <div>333</div>
    <div>444</div>
</div>
</body>
</html>