<!DOCTYPE>
<html>
<head>
<meta charset="gbk">
<title></title>
<style>
#left_nav{width:320px;}
#left_nav ul {list-style: none;margin: 0; padding: 0;overflow:hidden; float: left;}
#left_nav ul li{width: 80px; height: 30px ;border: 1px solid;}
#left_nav .active {background:pink;}
#left_nav div {width: 236px; height: 250px; display: none;border: 1px solid; float: right;background:#e67777}
</style>
<script>
window.οnlοad=function (){
var oDiv=document.getElementById("left_nav");
var aBtn=oDiv.getElementsByTagName("li");
var aDiv=oDiv.getElementsByTagName("div");
for (var i = 0; i < aBtn.length; i++) {
aBtn[i].index=i;
aBtn[i].οnmοuseοver=function (){
for (var i = 0; i < aBtn.length; i++) {
aBtn[i].className="";
aDiv[i].style.display="none";
};
this.className="active";
aDiv[this.index].style.display="block";
};
};
}
</script>
</head>
<body>
<div id="left_nav">
<ul>
<li class="active"><a href="#">导航1</a></li>
<li><a href="#">导航2</a></li>
<li><a href="#">导航3</a></li>
</ul>
<div style="display:block;">内容1</div>
<div>内容2</div>
<div>内容3</div>
</div>
</body>
</html>
5万+
“相关推荐”对你有帮助么？
-
非常没帮助 -
没帮助 -
一般 -
有帮助 -
非常有帮助
提交
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
