js的标签切换代码,很简单易懂,也可以变通实现菜单导航移动出现下拉菜单。
html样式代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<style> #tag li{ float:left; list-style:none; margin-right:10px; height:50px;} #tagContent div{ width:200px; height:200px; background-color:#B55A5C; display:none; } </style> <div style="height:50px;"> <ul id="tag"> <li>新品</li> <li>品牌</li> <li>服饰</li> <li>鞋履</li> <li>包袋</li> <li>配饰</li> </ul> </div> <div id="tagContent"> <div> 111111111 </div> <div> 2222222222 </div> <div> 3333333333 </div> <div> 4444444444 </div> <div> 5555555555 </div> <div> 66666666666 </div> </div> |
js代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<script> var tag=document.getElementById("tag").children; //获取Tag下的li,即Tag标签 var content=document.getElementById("tagContent").children; //获取Tag标签对应的内容 content[0].style.display = "block"; //默认显示第一个标签的内容 var len= tag.length; for(var i=0; i<len; i++) { tag[i].index=i; //设置对象的INDEX属性,方便下面调用 tag[i].onmouseover = function() { for(var n=0; n<len; n++) { tag[n].className=""; content[n].style.display="none"; } tag[this.index].className = "current"; content[this.index].style.display = "block"; } //鼠标移走消失(用于导航下拉菜单) content[i].onmouseout = function(){ this.style.display = "none"; } } </script> |