<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="../css/main.css" />
<style type="text/css">
.demo{width:400px; margin:50px auto}
#userlist{margin:4px; height:42px}
#userlist li{float:left; width:80px; line-height:42px; height:42px; font-size:14px; font-weight:bold}
#info{clear:left; padding:6px; border:1px solid #b6d6e6; background:#e8f5fe}
#info p{line-height:24px}
#info p span{font-weight:bold}
</style>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
$(function(){
$("#userlist a").bind("click",function(){
var hol = $(this).attr("rel");
var data = "action=getlink&id="+hol;
$.getJSON("server.php",data, function(json){
$("#name").html(json.name);
$("#sex").html(json.sex);
$("#tel").html(json.tel);
$("#email").html(json.email);
});
});
});
</script>
</head>
<body>
<div id="main">
<div class="demo">
<p>提示：点击姓名看看</p>
<ul id="userlist">
<li><a href="#" rel="1">张三</a></li>
<li><a href="#" rel="2">李四</a></li>
<li><a href="#" rel="3">王五</a></li>
</ul>
<div id="info">
<p>姓名：<span id="name"></span></p>
<p>性别：<span id="sex"></span></p>
<p>电话：<span id="tel"></span></p>
<p>邮箱：<span id="email"></span></p>
</div>
</div>
</div>
</body>
</html>
相关文章
精彩导读
热门资讯
关注我们
