JavaScript选项卡

来源：互联网发布：group是什么域名编辑：程序博客网时间：2024/06/07 22:11
<style type="text/css">*{padding: 0;margin: 0;list-style: none;}#ul{height: 20px;}#ul li{float: left;width: 40px;height: 20px;}#smallbox{width: 160px;height: 100px;position: relative;}#smallbox div{width: 160px;height: 100px;border: 1px solid red;position: absolute;float: left;display: none;}.active{border-top:1px solid red;}</style><body><div id="bigbox"><ul id="ul"><li class="active">新闻</li><li>体育</li><li>娱乐</li><li>综艺</li></ul><div id="smallbox"><div id="box_one" style="display: block;">新闻</div><div id="box_tow">体育</div><div id="box_three">娱乐</div><div id="box_four">综艺</div></div></div></body><script type="text/javascript">var aul = document.getElementById("ul");var bli = aul.getElementsByTagName("li");//alert(bli.length);var cdiv = document.getElementById("smallbox");var ddiv = cdiv.getElementsByTagName("div");//alert(ddiv.length);for(var i = 0; i<bli.length; i++){//对li进行遍历，获取点击的是哪个libli[i].onclick = function(){for(var j = 0; j<ddiv.length; j++){//对要显示的div进行遍历bli[j].className = "";ddiv[j].style.display = "none";//当点击li时候，让所有div都隐藏if(this == bli[j]){//判断当前点击的li是所有li中的哪一个 获取哪个j ddiv[j].style.display = "block";//让获得的j 即对应的点击哪个li的div显示this.className = "active";}}}}</script>
阅读全文
0 0