1.导航下拉效果
代码如下：
<!DOCTYPE html>
<html>
<head runat="server">
<title>JavaScript下拉菜单</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
body {
font-family: verdana, sans-serif;
font-size: small;
}
#navigation, #navigation li ul {
list-style-type: none;
}
#navigation {
margin: 20px;
}
#navigation li {
float: left;
text-align: center;
position: relative;
}
#navigation li a:link, #navigation li a:visited {
display: block;
text-decoration: none;
color: #000;
width: 120px;
height: 40px;
line-height: 40px;
border: 1px solid #fff;
border-width: 1px 1px 0 0;
background: #c5dbf2;
padding-left: 10px;
}
#navigation li a:hover {
color: #fff;
background: #2687eb;
}
#navigation li ul li a:hover {
color: #fff;
background: #6b839c;
}
#navigation li ul {
display: none;
position: absolute;
top: 40px;
left: 0;
margin-top: 1px;
width: 120px;
}
#navigation li ul li ul {
display: none;
position: absolute;
top: 0px;
left: 130px;
margin-top: 0;
margin-left: 1px;
width: 120px;
}
</style>
<script type="text/javascript">
function displaySubMenu(li) {
var subMenu = li.getElementsByTagName("ul")[0];
subMenu.style.display = "block";
}
function hideSubMenu(li) {
var subMenu = li.getElementsByTagName("ul")[0];
subMenu.style.display = "none";
}
</script>
</head>
<body>
<ul id="navigation">
<li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">
<a href="#">栏目1</a>
<ul>
<li><a href="#">栏目1->菜单1</a></li>
<li><a href="#">栏目1->菜单2</a></li>
<li><a href="#">栏目1->菜单3</a></li>
<li><a href="#">栏目1->菜单4</a></li>
</ul>
</li>
<li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">
<a href="#">栏目2</a>
<ul>
<li><a href="#">栏目2->菜单1</a></li>
<li><a href="#">栏目2->菜单2</a></li>
<li><a href="#">栏目2->菜单3</a></li>
<li><a href="#">栏目2->菜单4</a></li>
<li><a href="#">栏目2->菜单5</a></li>
</ul>
</li>
<li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">
<a href="#">栏目3</a>
<ul>
<li onmouseover="displaySubMenu(this)"
onmouseout="hideSubMenu(this)"><a href="#">栏目3->菜单1</a>
<ul>
<li><a href="#">菜单1->子菜单1</a></li>
<li><a href="#">菜单1->子菜单2</a></li>
<li><a href="#">菜单1->子菜单3</a></li>
<li><a href="#">菜单1->子菜单4</a></li>
</ul>
</li>
<li><a href="#">栏目3->菜单2</a></li>
<li onmouseover="displaySubMenu(this)"
onmouseout="hideSubMenu(this)">
<a href="#">栏目3->菜单3</a>
<ul>
<li><a href="#">菜单3->子菜单1</a></li>
<li><a href="#">菜单3->子菜单2</a></li>
<li><a href="#">菜单3->子菜单3</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>
结果如下：
2.Tab效果
基本思想：
- 通过DIV+CSS进行网页布局
- 使用onmouseover()方法和display属性来控制不同的内容显示
首先获取所有的li保存在集合中， 然后通过for循环遍历每个li。当遍历当相应的li后，再用内层for循环隐藏所有Tab对应的内容，取消li对应的样式。内层for循环结束，显示被选中li所对应的Tab框，恢复li的样式。
代码如下：
<!DOCTYPE html>
<html>
<head>
<title>Tab切换特效</title>
<style type="text/css">
* {
padding:0;
margin:0;
}
ul {
list-style-type:none;
}
ul li {
float:left;
width:80px;
height: 32px;
line-height: 32px;
text-align:center;
border:1px solid #eee;
cursor:pointer;
}
.allContent {
clear:both;
width: 400px;
height: 100px;
border:1px solid #bbb;
}
.dis {
display: none;
}
.liHover {
background-color:#F77;
}
</style>
<script type="text/javascript">
window.onload = function() {
var li_x = document.getElementsByTagName("li"); //获取所有li标签
//循环li，当对应的li被选中时，就显示对应的div
for(var i = 0;i < li_x.length;i++) {
//绑定每个li的下标，index属性相当于数组中的下标
li_x[i].index = i;
//当鼠标停留在其中一个li上时，执行这个函数
li_x[i].onmouseover = function() {
for(var j = 0;j < li_x.length;j++) { //遍历所有li对应的div
//隐藏每个li所对应的div
var div_a = document.getElementById("tabCon"+j)
.style.display="none";
li_x[j].className=""; //同时清除每个li的样式
}
//循环结束，显示第一个被选中的li所对应的div
document.getElementById("tabCon"+this.index)
.style.display="block";
li_x[this.index].className = "liHover"; //为选中的li加上样式
}
}
}
</script>
</head>
<body>
<ul>
<li>语文</li>
<li>数学</li>
<li>dsfasf</li>
<li>啥sf</li>
<li>英语</li>
</ul>
<div class="allContent">
<div class="tabContent" id="tabCon0">中文是一门博大精深的语言</div>
<div class="tabContent dis" id="tabCon1">数学是很多学科的基础</div>
<div class="tabContent dis" id="tabCon2">数学是很多学科的基础</div>
<div class="tabContent dis" id="tabCon3">klfdssa;lkfdsalk</div>
<div class="tabContent dis" id="tabCon4">阴雨暗示法第三</div>
</div>
</body>
</html>
效果如下：
