今天在《JavaScript基础教程》中看到的一个例子。效果如下图:
功能:
①显示菜单;
首先是HTML文件:
<!DOCTYPE html>
<html>
<head>
<title>Shakespeare's Plays</title>
<link rel="stylesheet" href="script03.css">
<script src="script03.js"></script>
</head>
<body>
<h1>Shakespeare's Plays</h1>
<div><span > </span>//注意div里的内容
<a href="menu1.html" class="menuLink">Comedies</a>
<ul class="menu" id="menu1">
<li><a href="pg1.html">All's Well That Ends Well</a></li>
<li><a href="pg2.html">As You Like It</a></li>
<li><a href="pg3.html">Love's Labour's Lost</a></li>
<li><a href="pg4.html">The Comedy of Errors</a></li>
</ul>
</div>
<div>
<a href="menu2.html" class="menuLink">Tragedies</a>
<ul class="menu" id="menu2">
<li><a href="pg5.html">Anthony & Cleopatra</a></li>
<li><a href="pg6.html">Hamlet</a></li>
<li><a href="pg7.html">Romeo & Juliet</a></li>
</ul>
</div>
<div>
<a href="menu3.html" class="menuLink">Histories</a>
<ul class="menu" id="menu3">
<li><a href="pg8.html">Henry IV, Part 1</a></li>
<li><a href="pg9.html">Henry IV, Part 2</a></li>
</ul>
</div>
</body>
</html>
CSS设置文件:
body {
background-color: #FFF;
color: #000;
}
div {
margin-bottom: 10px;
width: 20em;
background-color: #9CF;
float: left;<span > //把垂直菜单转换为水平菜单
}
ul.menu {
display: none;
list-style-type: none;
margin: 0;
padding: 0;
}
ul.menu li {
font: 1em arial, helvetica, sans-serif;
padding-left: 10px;
}
a.menuLink, li a {
text-decoration: none;
color: #006;
}
a.menuLink {
font-size: 1.2em;
font-weight: bold;
}
ul.menu li a:hover {
background-color: #006;
color: #FFF;
padding-right: 10px;
}
JavaScript文件:
window.onload = initAll;
function initAll() {
var allLinks = document.getElementsByTagName("a"); //创建包含页面上所有链接的数组
for (var i=0; i<allLinks.length; i++) {
if (allLinks[i].className.indexOf("menuLink") > -1) { //找到"class=menuLink"的链接
allLinks[i].onmouseover = toggleMenu; //鼠标指针于其上时,调用toggleMenu
allLinks[i].onclick = clickHandler; //鼠标或键盘点击时,调用clickHandler
}
}
}
function clickHandler(evt) { //处理不同浏览器在事件传递方面的差异
if (evt) {
if (typeof evt.target == "string") {
toggleMenu(evt,evt.target);
}
else {
toggleMenu(evt,evt.target.toString());
}
}
else {
toggleMenu(evt,window.event.srcElement.href); //传递伪evt对象和IE存储目标值的位置(菜单)
}
return false;
}
function toggleMenu(evt,currMenu) {
if (toggleMenu.arguments.length < 2) {
var currMenu = this.href; //若参数个数为0或1,得到键盘或鼠标点击目标的href(菜单名)--分析③
}
var startMenu = currMenu.lastIndexOf("/")+1;
var stopMenu = currMenu.lastIndexOf(".");
var thisMenuName = currMenu.substring(startMenu,stopMenu); //menu1(2、3).html取出menu1(2、3)
var thisMenu = document.getElementById(thisMenuName);
thisMenu.style.display = "block";
thisMenu.parentNode.className = thisMenuName; //获得当前链接的父元素div,并将其class赋值为menu1或者menu2、menu3
thisMenu.parentNode.onmouseout = function() { //鼠标指针离开div区域(区域内容看HTML文件)
document.getElementById(this.className).style.display = "none";
}
thisMenu.parentNode.onmouseover = function() { //指针在div内
document.getElementById(this.className).style.display = "block";
}
}
除了上面的注释,再分析下这段js代码:
①javascript的函数中,并不要求传递的参数个数和函数中定义的一样;
②隐藏和显示菜单的方法:
先得到style属性--x=document.getElementById(y.className).style;
隐藏:x.display='none';显示:x.display='block';
③本文中对浏览器差异,处理的三种传递参数的情况:
1.当浏览器是IE并通过鼠标触发toggleMenu()时,不传递参数<2
2.当浏览器不是IE并通过鼠标触发toggleMenu()时,传递一个参数(event对象)<2
上面两种情况需要下面的方式,获得被点击的菜单名
var currMenu = this.href;
3.当通过clickHandler()调用toggleMenu()时,传递两个参数(event对象和菜单名)