只用Jquery访问Xml动态生成html标签

最新推荐文章于 2021-05-31 20:49:16 发布

hughlaw

最新推荐文章于 2021-05-31 20:49:16 发布

阅读量213

点赞数

文章标签： HTML XML jQuery Firefox Opera ViewUI

本文链接：https://blog.csdn.net/hughlaw/article/details/83877196

版权

[b]XML:[/b]
<?xml version="1.0" encoding="utf-8" ?>
<books>
<book title="藏地密码" imageurl="http://www.iwms.net/buy/pic/product_6.gif">
<description>
这里是概况(www.huyang8.com)
</description>
</book>

<book title="剑桥雅思6" imageurl="http://www.iwms.net/buy/pic/product_6.gif">
<description>
这里是概况(www.huyang8.com)
</description>
</book>

<book title="Professional ASP.NET" imageurl="http://www.iwms.net/buy/pic/product_6.gif">
<description>
这里是概况(www.huyang8.com)
</description>
</book>
</books>

[b]HTML:[/b]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
</script>
<title>jquery实战-菜单效果</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link type="text/css" rel="stylesheet" href="cs.css">
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js.js"></script>
</head>
<body>
</body>
</html>

[b]js:[/b]
$(function(){
/*页面中的DOM已经装载完成时，执行的代码*/
$.get('novel.xml', function(d){
var html = '<ul>';
$(d).find('book').each(function(){
var $book = $(this);
var title = $book.attr("title");
var description = $book.find('description').text();
var imageurl = $book.attr('imageurl');

html += ' <li class="main"><a href="#">' + title + '</a>';
html += ' <ul>';
html += ' <li>' + description + '</li>';
html += ' <li>' + imageurl + '</li>';
html += ' </ul>';
html += ' </li>' ;

}); //each
html += '</ul>';
$('body').append($(html));
}); //get

var firstA = $(".main > a");
var firstli = $(".main");
firstA.live('mouseover',function(){
$(this).next("ul").show("slow");
});

firstli.live('mouseleave',function(){
$(this).children("ul").hide("slow");
});
});

[b]css:[/b]
ul, li {
/*清除ul和li上默认的小圆点*/
list-style:none;
}

ul{
/*清除子菜单的缩进值*/
padding: 0;
margin: 0;
workspace}

.main{
background-image:url(title.gif);
background-repeat:repeat-x;
width:200px;
}

li{
background-color:#EEEEEE;

}

a{
/*取消所有的开线*/
text-decoration:none;
padding-left:20px;
display:block;
display:inline-block;/*ie6兼容问题*/
width:180px;
padding-top:3px;
padding-bottom:3px;
}

.main a{
color:white;
background-image:url(collapsed.gif);
background-repeat:no-repeat;
background-position:3px center;
}

.main li a{
color:black;
background-image:none;
}

.main ul{
display:none;
}

[b]问题：[/b]
为什么以上代码在firefox里可以显示效果，在ie7和opera浏览器里不能显示任何标签。