js+css实现tab菜单切换效果的方法
本文实例讲述了js+css实现tab菜单切换效果的方法。分享给大家供大家参考。具体实现方法如下:
index.css如下:
*{ margin:0px; padding:0px; } body{ width:600px; margin:0auto; background-color:silver; } #contanier{ background-color:yellow; width:600px;height:400px; } #tabNavi{ width:600px;height:30px; background-color:#00bfff; text-decoration:none; list-style-type:none; } #tabNavili{ float:left; margin-right:7px; background-color:#008b8b; color:white; cursor:pointer; width:60px; height:28px; line-height:30px; text-align:center; } #content{ width:600px;height:370px; background-color:white; }
index.html如下:
<!DOCTYPEhtml> <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> <title>js实现tab菜单动态切换效果</title> <linkhref="css/index.css"rel="stylesheet"/> <scripttype="text/javascript"> functiongel(id){ returndocument.getElementById(id); } vararr=[ {"title":"新闻","content":"这是新闻频道"}, {"title":"财经","content":"这是财经频道"}, {"title":"娱乐","content":"这是娱乐频道"}, {"title":"体育","content":"这是体育频道"}, {"title":"汽车","content":"这是汽车频道"}, {"title":"视频","content":"这是视频频道"}, {"title":"生活","content":"这是生活频道"} ]; window.onload=function(){ for(vari=0;i<arr.length;i++){ varliNew=document.createElement("li"); liNew.innerHTML=arr[i].title; gel("tabNavi").appendChild(liNew); //在这些li上面都绑定点击事件,就需要给他们每一个赋一个属性(最好是id) liNew.setAttribute("id",i); liNew.onclick=function(){ varnavs=gel("tabNavi").childNodes; //清除所有颜色 for(varj=0;j<navs.length;j++){ if(navs[j].nodeType==1){ navs[j].style.backgroundColor="#008b8b"; } } this.style.backgroundColor="red"; gel("content").innerHTML=arr[this.id].content; }; } }; </script> </head> <body> <divid="contanier"> <ulid="tabNavi"></ul> <divid="content"class="content"></div> </div> </body> </html>
希望本文所述对大家的javascript程序设计有所帮助。