<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{margin:0px;padding:0px}
#box{width:890px;height:400px;overflow:hidden;border:4px solid #000;margin:auto}
#box ul{width:100%;height:42px;overflow:hidden;}
#box ul li{list-style:none;float:left;width:177px;height:40px;border:1px solid #DDDDDD
border-right:none;text-align:center;line-height:40px;background:#F4F5F5;cursor:pointer;
}
#content div{display:none;}
</style>
</head>
<body>
<div id="box">
<ul>
<li>文本1</li>
<li>文本2</li>
<li>文本3</li>
<li>文本4</li>
<li>文本5</li>
</ul>
<div id="content">
<div>11111</div>
<div>22222</div>
<div>33333</div>
<div>44444</div>
<div>55555</div>
</div>
window.onload = function(){
var aTabs = document.getElementById("box").getElementsByTagName("ul")[0].getElementsByTagName("li");
var aContents = document.getElementById("content").getElementsByTagName("div");
aTabs[0].style.borderLeft = "none";
aTabs[0].style.width = "178px";
aTabs[0].style.background = "transparent ";
aTabs[0].style.broderBottomWidth = "0px";
aContents[0].style.display = "block";
for(var j=0;j<aTabs.length;j++){
aTabs[j].index = j;
}
for(var i=0;i < aTabs.length;i++){
aTabs[i].onmouseover = function(){
for(var k =0;k < aTabs.length;k++){
aTabs[k].style.background = "#F4F5F5";
aTabs[k].style.borderBottomWidth = "1px";
aContents[k].style.display="none";
}
this.style.background = "transparent ";
this.style.borderBottomWidth="0px";
aContents[this.index].style.display="block";
};
}
};
</script>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{margin:0px;padding:0px}
#box{width:890px;height:400px;overflow:hidden;border:4px solid #000;margin:auto}
#box ul{width:100%;height:42px;overflow:hidden;}
#box ul li{list-style:none;float:left;width:177px;height:40px;border:1px solid #DDDDDD
border-right:none;text-align:center;line-height:40px;background:#F4F5F5;cursor:pointer;
}
#content div{display:none;}
</style>
</head>
<body>
<div id="box">
<ul>
<li>文本1</li>
<li>文本2</li>
<li>文本3</li>
<li>文本4</li>
<li>文本5</li>
</ul>
<div id="content">
<div>11111</div>
<div>22222</div>
<div>33333</div>
<div>44444</div>
<div>55555</div>
</div>
</div>
<!--JavaScript代码-->
window.onload = function(){
var aTabs = document.getElementById("box").getElementsByTagName("ul")[0].getElementsByTagName("li");
var aContents = document.getElementById("content").getElementsByTagName("div");
aTabs[0].style.borderLeft = "none";
aTabs[0].style.width = "178px";
aTabs[0].style.background = "transparent ";
aTabs[0].style.broderBottomWidth = "0px";
aContents[0].style.display = "block";
for(var j=0;j<aTabs.length;j++){
aTabs[j].index = j;
}
for(var i=0;i < aTabs.length;i++){
aTabs[i].onmouseover = function(){
for(var k =0;k < aTabs.length;k++){
aTabs[k].style.background = "#F4F5F5";
aTabs[k].style.borderBottomWidth = "1px";
aContents[k].style.display="none";
}
this.style.background = "transparent ";
this.style.borderBottomWidth="0px";
aContents[this.index].style.display="block";
};
}
};
</script>
</body>
</html>
1389
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
