1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
5 <title></title>
6 </head>
7 <body>
8 <div>
9 <ul id="menu">
10 <li><a href="menu1.html">menu #1</a></li>
11 <li><a href="menu2.html">menu #2</a></li>
12 <li><a href="menu3.html">menu #3</a></li>
13 <li><a href="menu4.html">menu #4</a></li>
14 </ul>
15 </div>
16 <script type="text/javascript" src="index.js"></script>
17 </body>
18 </html>
1 document.getElementById('menu').onclick = function(e) {
2
3 //浏览器 target
4 e = e || window.event;
5 var target = e.target || e.srcElement;
6
7 var pageid, hrefparts;
8
9 //只关心hrefs,非链接点击则退出
10 if (target.nodeName !== 'A') {
11 return;
12 }
13
14 //从链接中找出页面ID
15 hrefparts = target.href.split('/');
16 pageid = hrefparts[hrefparts.length - 1];
17 pageid = pageid.replace('.html', '');
18
19 //更新页面
20 ajaxRequest('xhr.php?page=' + id, updatePageContents);
21
22 //浏览器阻止默认行为并取消冒泡
23 if (typeof e.preventDefault === 'function') {
24 e.preventDefault();
25 e.stopPropagation();
26 } else {
27 e.returnValue = false;
28 e.cancelBubble = true;
29 }
30 };
