如何實現網頁滑鼠瀏覽左邊的導航右邊顯示對應的頁面
阿新 • • 發佈：2019-01-09
<!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.onload=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].onmouseover=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>