首页 新闻 搜索 专区 学院

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,比如点击“我的博客”,右侧就出现“我的博客”页里面的内容,怎么写呢?望大家指点一二,谢谢。

wanglan的主页 wanglan | 初学一级 | 园豆:156
提问于:2012-04-19 18:58
< >
分享
最佳答案
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
artwl | 专家六级 |园豆:16536 | 2012-04-19 19:33
其他回答(2)
0

你可以把博客园首页左侧分类的源代码复制出来,把主要的代码找出来,再写出自己想要的效果呗

KivenRo | 园豆:1722 (小虾三级) | 2012-04-19 20:17
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
icepy | 园豆:587 (小虾三级) | 2012-04-19 21:33
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册