最近在用ajax和jquery做开发,所以闲来无事写了些小导航条,通过ajax解析XML文件动态的创建WEB网站的导航条。
<link href="css/style.css" rel="stylesheet" type="text/css" /><script src="js/jquery-1.8.2.min.js" type="text/javascript"></script><script type="text/javascript">jQuery(function () {var dom = new ActiveXObject("Microsoft.XMLDOM");dom.async = false;dom.load("xml/MenuXml.xml");if (dom.parseError.errorCode != 0) {alert(dom.parseError.line + "\r\n" + dom.parseError.reason);}else {var menus = dom.documentElement.childNodes;var ul = document.createElement("ul");for (var i = 0; i < menus.length; i++) {var li = document.createElement("li");var a = document.createElement("a");a.innerHTML = menus[i].getAttribute("title");a.href = menus[i].getAttribute("url");li.appendChild(a);ul.appendChild(li);}$("#menu2").append(ul);}$("#menu2 ul li").prepend("<span></span>");$("#menu2 ul li").each(function () {var linkText = $(this).find("a").html();$(this).find("span").show().html(linkText);});$("#menu2 ul li").hover(function () {$(this).find("span").stop().animate({ marginTop: -40 }, 200);}, function () {$(this).find("span").stop().animate({ marginTop: 0 }, 200);});});</script> </head> <body><div id="menu2"></div> </body>
附件