<!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">
div{
margin-bottom:10px;
}
ul.menu{
display:none;
list-style-type:none;
margin-top:5px;
}
a.menuLink{
font-size:16px;
font-weight:bold;
}
</style>
<script type="text/javascript">
function initAll(){
var allLinks = document.getElementsByTagName("a"); //获取所有a元素节点
for(var i=0; i<allLinks.length; i++){ //遍历素有a元素节点
if(allLinks[i].className.indexOf("menuLink") > -1){ //如果a元素的className含有字符串menuLink
allLinks[i].onmouseover = toggleMenu; // 鼠标指针移动到className含有字符串menuLink的a标签调用toggleMenu函数
allLinks[i].onclick = function(){ //onclick方法函数返回false 链接不跳转
return false;
}
}
}
};
function toggleMenu(){;
var startMenu = this.href.lastIndexOf("/")+1; //鼠标指针下 a标签的href属性/出现的位置索引+1 从后向前搜索
var stopMenu = this.href.lastIndexOf("."); //鼠标指针下 a标签的href属性.出现的索引位置 从后向前搜索
var thisMenuName = this.href.substring(startMenu,stopMenu); // 鼠标指针下 a标签的href属性 /出现的位置索引+1和.出现的索引位置 之间的字符串
document.getElementById(thisMenuName).style.display = "block"; // 设置ul样式为block
this.parentNode.className = thisMenuName; // 鼠标指针下 a标签的父节点div的className设置为鼠标指针下 a标签的className
this.parentNode.onmouseout = function(){ // 鼠标指针离开鼠标指针下 a标签的父节点div
document.getElementById(this.className).style.display = "none"; //通过div的className获取div设置样式为none this指的是当前div
}
this.parentNode.onmouseover = function(){// 鼠标指针移入鼠标指针下 a标签的父节点div
document.getElementById(this.className).style.display = "block";//通过div的className获取div设置样式为block
}
};
window.onload = initAll;
</script>
</head>
<body>
<div>
<a href="menu1.html" class="menuLink">1</a>
<ul class="menu" id="menu1">
<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>
</div>
<div>
<a href="menu2.html" class="menuLink">2</a>
<ul class="menu" id="menu2">
<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>
</ul>
</div>
<div>
<a href="menu3.html" class="menuLink">3</a>
<ul class="menu" id="menu3">
<li><a href="#">3-1</a></li>
<li><a href="#">3-2</a></li>
<li><a href="#">3-3</a></li>
<li><a href="#">3-4</a></li>
</ul>
</div>
</body>
</html>