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 };