最近在用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>