js简易选项卡

来源:互联网 发布:win7 upnp nat端口失败 编辑:程序博客网 时间:2024/05/21 10:53

思路:

》通过js动态添加索引号以判断应该显示的div

<body><div id="div1"><ul> <li class="active">11</li> <li>22</li> <li>33</li> </ul><div>11111111</div><div style="display:none;">2222222222222</div><div style="display:none;">3333333333</div></div></body>

<script>window.onload=function(){var oDiv=document.getElementById('div1');var oUl=oDiv.getElementsByTagName('ul')[0]; var aLi=oUl.getElementsByTagName('li');var aDiv=oDiv.getElementsByTagName('div');for(var i=0;i<aLi.length;i++){aLi[i].index=i;//动态为标签添加index属性aLi[i].onclick=function(){for(var i=0;i<aLi.length;i++){aLi[i].className=" ";aDiv[i].style.display="none";}this.className="active";aDiv[this.index].style.display="block";//显示相应的div}}}</script>


0 0