通过Ajax解析和jQuery写了一个小小的导航条

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

附件

转载于:https://www.cnblogs.com/Mr-Daian/articles/jQuery.html

通过Ajax解析和jQuery写了一个小小的导航条相关推荐

用jQuery写的一个翻页，并封装为插件，
用jQuery写的一个翻页,并封装为插件, 1 *{ 2 margin:0; 3 padding: 0; 4 list-style: none; 5 text-decoration: none; 6 ...
bootstrap 导航菜单折叠位置_教大家如何编写一个网页导航条
导航条简单地说就是对你整个网站模块的简单介绍,你可以直接点击导航条某一个按钮或板块便可进入其相应的界面,如:网页.新闻.贴吧等 .在企业网站上,导航条上常见的有:产品介绍,公司简介,最新产品,联系我们 ...
基于jQuery鼠标悬停上下滑动导航条
基于jQuery鼠标悬停上下滑动导航条.这是一款蓝色好看的鼠标响应式网站导航菜单特效.效果图如下: 在线预览源码下载实现的代码. html代码: <div id="menu2 ...
使用Jquery，Ajax+Struts+Spring+Ibatis写的一个无限级树，供大家参考一下
先看看jsp页面,tree.jsp,Code如下: <%@ page contentType="text/html;charset=UTF-8" %><% Str ...
jquery ajax实现聊天室,用jquery写了一个超简陋的ajax无刷新聊天室
.msg+" ["+data.list.time1+"]"); scrollWindow(); } } },"json"); } fu ...
基于jQuery写的一个计数器
哈哈第一次发文章写的要是有不好的欢迎各位提出哈用晚修一节课写的代码很烂 html结构 <body><p>不可以低于0哦</p><div class=&qu ...
写了一个小小的html
因为只是小的作业,大概写一点东西,所以使用了文本文档写的,就...好累哦! <!DOCTYPE html> <html> <head> <meta chars ...
ajax伸缩菜单,jQuery实现的动态伸缩导航菜单实例
/p> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> jquery select body {p ...
五分钟写出一个可以滑动条拖动的矩形脉冲合成的MatlabGUI程序
命令行输入 GUIDE 创建空白GUI程序拖动控件,右键察看滑动条的回调函数,粘贴如下代码滑动条参数设置 function slider1_Callback(hObject, eventdata, ...

通过Ajax解析和jQuery写了一个小小的导航条

通过Ajax解析和jQuery写了一个小小的导航条相关推荐

最新文章

热门文章