jquery点击左侧任意一个li，右侧相应切换li的内容,怎么实现？
0
悬赏园豆：10
[已解决问题]
解决于 2012-04-21 22:55
jquery点击左侧任意一个li，右侧相应切换li的内容，想这个怎么实现？
左侧是
<div class="sider">
<ul>
<li><a href="/"><span ></span>我的首页</a></li>
<div ></div>
<li>
<a href="/"><span ></span>我的博客</a>
</li>
<li>
<div >
<a href="/"><span ></span>我的心情日记</a></li>
</div>
</div>
点击左侧的li,比如点击“我的博客”,右侧就出现“我的博客”页里面的内容，怎么写呢？望大家指点一二，谢谢。
最佳答案
0
你是想要这样的效果吗：
<!DOCTYPE html> <html> <head> <title>Demo</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <style type="text/css"> .sider{ float:left; width:150px; } ul,li{ list-style:none; } .right{ float:right; width:800px; background-color:#EEE; height:500px; } </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $("div.sider ul li").each(function(index,item){ $(item).bind("click",function(){ $("div.right").html($(this).text()); }); }); }); </script> </head> <body> <div class="sider"> <ul> <li><a href="javascript:void(0)"><span ></span>我的首页</a></li> <li><a href="javascript:void(0)"><span ></span>我的博客</a></li> <li><a href="javascript:void(0)"><span ></span>我的心情日记</a></li> </ul> </div> <div class="right"> </div> </div> </body> </html>
收获园豆：5
其他回答(2)
0
你可以把博客园首页左侧分类的源代码复制出来，把主要的代码找出来，再写出自己想要的效果呗
0
artwl的JQuery是可以的，如果你想看原生js的写法，我算补充一下吧，可以看看。
<!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>
<title>Untitled Page</title>
<style type="text/css">
.sider{ width:965px; margin:0 auto;}
.sider ul{ width:100px; float:left; border:4px solid #ccc; margin:0px; padding:0px; margin-right:10px;}
.rigt{ width:450px; height:66px; float:left; border:4px solid #ccc;}
</style>
<script type="text/javascript">
//<![CDATA[
(function () {
function de(id) {
var doc = document;
if (typeof id == "string") {
id = doc.getElementById(id);
}
var li = id.getElementsByTagName("li");
var ri = document.getElementById("ri");
for (var i = 0; i < li.length; i++) {
li[i].onclick = function () {
if (window.XMLHttpRequest) {
var moz_text = this.textContent;
ri.textContent = moz_text;
} else {
var text = this.innerText;
ri.innerHTML = text;
}
}
}
}
window.onload = function () {
de("dell");
}
})();
//]]>
</script>
</head>
<body>
<div class="sider">
<ul id="dell">
<li><a href="/"><span ></span>我的首页</a></li>
<li><a href="/"><span ></span>我的博客</a></li>
<li><a href="/"><span ></span>我的心情日记</a></li>
</ul>
<div class="rigt" id="ri"></div>
</div>
</body>
</html>
收获园豆：5
