js选项卡

来源：互联网发布：淘宝达人怎么开通直播编辑：程序博客网时间：2024/06/17 16:20

<html xmlns="http://www.w3.org/1999/xhtml"><head><style>#div1 input {background:#CCC;}#div1 .active {background:yellow;}#div1 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 (){var oDiv=document.getElementById('div1');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></body></html>

<!DOCTYPE html><html lang="zh-cn"><head><meta charset="utf-8"><style>#div1 .active{background:#ff0;}#div1 div{background:#ccc;width:200px;height:150px;display:none;}</style><script>window.onload=function(){var odiv=document.getElementById('div1');var abtn=odiv.getElementsByTagName('input');var adiv=odiv.getElementsByTagName('div');for(var i=0;i<abtn.length;i++){abtn[i].index=i;abtn[i].onmouseover=function(){//alert(this.value)for(var 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="招生"><input type="button" value="出国"><div style="display:block;">11</div><div>22</div><div>33</div><div>44</div></div></body></html>

0 0