js 选项卡切换

来源：互联网发布：大同集宁之战知乎编辑：程序博客网时间：2024/06/05 05:24

通过按钮来切换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>

阅读全文

0 0