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程序设计有所帮助。