通过按钮来切换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>
扫一扫
1020
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
