jquery点击左侧任意一个li，右侧相应切换li的内容,怎么实现？

berggi 2012-04-19 06:55:53

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

...全文

409 2 打赏收藏转发到动态举报

写回复

用AI写文章

2 条回复

切换为时间正序

请发表友善的回复…

发表回复

豪情 2012-04-19

打赏
举报



<!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" xml:lang="en">

<head>

    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>

    <title>test-csdn-slide</title>

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

    <style type="text/css">

        *{ margin:0; padding:0;}

        body{ background:#3f3f3f;font:12px/2 arial;}

        ul,li{list-style-type:none;}

        a{color:#24d;text-decoration:none;}

        a:hover{color:#e40000;text-decoration:underline;}

        a:focus{outline:0;}

        .container{ width:1000px; margin:0 auto; background:#fff; overflow:hidden; padding:15px;}

        .silder{ float:left; width:200px; height:500px; border-right:1px solid #ccc;}

        .main{ float:right; width:770px;}

    </style>

</head>

<body>

<div class="container">

    <div class="silder">

        <ul class="slide_menu">

            <li><a href="#"><span></span>我的首页</a></li>

            <li><a href="#"><span></span>我的博客</a></li>

            <li><a href="#"><span></span>我的心情日记</a></li>

        </ul>

    </div>

    <div class="main">

        <ul class="main_cont">

            <li>我是首页内容</li>

            <li style="display:none;">我的博客内容</li>

            <li style="display:none;">我的心情日记内容</li>

        </ul>

    </div>

</div>

<script type="text/javascript">

    function s_menu(){

        $('.slide_menu>li').click(function(){

            var iVal = $(this).index();

            $('.main_cont>li').eq(iVal).show().siblings('li').hide();

            return false;

        });

    }

    s_menu();

</script>

</body>

</html>