js写的一个导航demo
在学习导航时总想自己写一个demo。虽然网上用js写的导航很多，并且实现的效果也非常酷炫，但是代码的可读性（能真正看懂吸收并借鉴）不高，所以想自己写一个demo，并分在这分享给大家。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
#tab{
width: 600px;
margin: 40px auto;
}
#head {
border: 2px solid #000000;
border-radius: 5px 5px 0 0;
background: #000000;
height: 40px;
}
#head ul{
list-style: none;
}
#head li{
width:120px;
height:40px;
line-height:40px;
float:left;
color:white;
text-align:center;
}
#head li:hover{
color:#000;
background:#999
}
#content{
width:596px;
border:2px #000 solid;
border-top:0;
border-radius:0 0 5px 5px;
box-shadow:5px 5px 8px #666;
}
#content .summary{
display:none;
clear:both;
}
#content ul{
list-style:none;
margin-left:40px;
}
</style>
<script>
function one(){
document.getElementById("one").style.display = "block";
document.getElementById("two").style.display = "none";
document.getElementById("three").style.display = "none";
}
function one1(){
document.getElementById("two").style.display = "none";
document.getElementById("one").style.display = "none";
document.getElementById("three").style.display = "none";
}
function two(){
document.getElementById("two").style.display = "block";
document.getElementById("one").style.display = "none";
document.getElementById("three").style.display = "none";
}
function two1(){
document.getElementById("two").style.display = "none";
document.getElementById("one").style.display = "none";
document.getElementById("three").style.display = "none";
}
function three(){
document.getElementById("three").style.display = "block";
document.getElementById("one").style.display = "none";
document.getElementById("two").style.display = "none";
}
function three1(){
document.getElementById("three").style.display = "none";
document.getElementById("one").style.display = "none";
document.getElementById("two").style.display = "none";
}
</script>
</head>
<body>
<div id="tab">
<div id="head">
<ul>
<li onmouseenter="one()" onmouseout="one1()">aa</li>
<li onmouseenter="two()" onmouseout="two1()">bb</li>
<li onmouseenter="three()" onmouseout="three1()">cc</li>
</ul>
</div>
<div id="content">
<div id="one" class="summary">
<ul>
<li>aa1</li>
<li>aa2</li>
<li>aa3</li>
</ul>
</div>
<div id="two" class="summary">
<ul>
<li>bb1</li>
<li>bb2</li>
<li>bb3</li>
</ul>
</div>
<div id="three" class="summary">
<ul>
<li>cc1</li>
<li>cc2</li>
<li>cc3</li>
</ul>
</div>
</div>
</div>
</body>
</html>
浙公网安备 33010602011771号