如何用JS或JQ实现点击不同的按钮出现不同的层内容？

      问题就是在一个页面，同进出现很多个标题，当点击不同的标题时，其他标题下面的内容就隐藏。 这个如何实现呀？

解决方案 »

  1.   


    JQ 显示 .show() 隐藏.hide()
    很简单的东西
      

  2.   


    <div class="tab">
    <table>
    <tr>
    <td id="tab1">租房</td>
    <td id="tab2">学生宿舍</td>
    </tr>
    </table>
    <div class="tab1">
    </div>
    <div class="tab2">
    </div>
    </div>
    $(document).ready(function() {
    /********* tab setting *********/
    $(".tab td:first").addClass("current");
        $(".tab div:not(:first)").hide(); /********* tab event *********/
        $(".tab td").click(function() {
            $(".tab td").removeClass("current");
            $(this).addClass("current");
            $(".tab div").hide();
            $("." + $(this).attr("id")).fadeIn('slow');
       }); $("#linkFSS").click(function(){
    $("#tab7").click();
    });});
      

  3.   

    <html>
    <script type="text/javascript" src="jquery-1.3.2.min.js"></script><script type="text/javascript">
    $(function()
    {$("div").css("display","none");
    $("h1").click(function(){
    var obj=$(this).next("div");
    $(obj).show("fast");
    $(obj).siblings("div").each(function(){$(this).hide();})
    });  
    });</script><style type="text/css">#panel
    {
    border:1px;
    border-color:green;
    border-style:double;
    background-color:#F0F8FF;
    cursor:pointer;
    width:100px;
    height:100px;
    }
    </style>
    <h1>gdgdg</h1>
    <div id="1"><p>ffffffffsfsffffffffjsfojsofjsofjsofjs</p></div>
    <h1>dgdgd</h1>
    <div id="2"><p>afafa<br>fsfsfsfsfsfs</p></div>
    <h1>hfhfhf</h1>
    <div id="3"><p>fffsfsfssssssssssssssssssssssssssssssssssfffffffff</p></div>
    </html>
      

  4.   

    代码这样呀：<html>
    <head>
    <script>
    $(document).ready(function() {
        /********* tab setting *********/
        $(".tab td:first").addClass("current");
        $(".tab div:not(:first)").hide();    /********* tab event *********/
        $(".tab td").click(function() {
            $(".tab td").removeClass("current");
            $(this).addClass("current");
            $(".tab div").hide();
            $("." + $(this).attr("id")).fadeIn('slow');
       });    $("#linkFSS").click(function(){
            $("#tab7").click();
        });});</script>
    </head>
    <body><div class="tab">
        <table>
            <tr>
                <td id="tab1">租房</td>
                <td id="tab2">学生宿舍</td>
            </tr>
        </table>
        <div class="tab1">租房租房租房租房租房租房租房租房租房租房租房租房租房租房租房租房租房租房租房租房租房租房
        </div>
        <div class="tab2">学生宿舍学生宿舍学生宿舍学生宿舍学生宿舍学生宿舍学生宿舍学生宿舍学生宿舍学生宿舍学生宿舍学生宿舍学生宿舍学生宿舍学生宿舍学生宿舍
        </div>
    </div>
    </body>
    <html><html>
    <head>
    <script type="text/javascript" src="jquery-1.3.2.min.js"></script><script type="text/javascript">
    $(function()
    {$("div").css("display","none");
    $("h1").click(function(){
        var obj=$(this).next("div");    
        $(obj).show("fast");
        $(obj).siblings("div").each(function(){$(this).hide();})
        });         
    });</script><style type="text/css">#panel
    {
    border:1px;
    border-color:green;
    border-style:double;
    background-color:#F0F8FF;
    cursor:pointer;
    width:100px;
    height:100px;
    }
    </style>
    </head>
    <body>
    <h1>gdgdg</h1>
    <div id="1"><p>ffffffffsfsffffffffjsfojsofjsofjsofjs</p></div>
    <h1>dgdgd</h1>
    <div id="2"><p>afafa<br>fsfsfsfsfsfs</p></div>
    <h1>hfhfhf</h1>
    <div id="3"><p>fffsfsfssssssssssssssssssssssssssssssssssfffffffff</p></div>
    </body>
    </html>