javascript - 单击按钮时在 jQuery 中显示 div

Question

在我的页面中有一个左固定 Pane 和一个由几个不断变化的 div 组成的可变右 Pane 。

我想点击左 Pane 中的按钮。应隐藏所需的右 Pane div show show 和其他 div。

http://jsfiddle.net/shivang/guvr4/2/

这是我到目前为止所取得的成就。但它不起作用任何人都可以帮助我。

HTML

    <div id="container">

<!-- Left Layout div starts -->
<div id="left_layout">
<table>
&nbsp;&nbsp;&nbsp;
<b></b>
<br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<tr></tr><br>
<br></br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<tr><button name="1">1</button></tr>
<br></br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<tr><button name="2">2</button></tr>
<br></br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<tr><button name="3">3</button></tr>
<br></br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<tr><button name="4">4</button></tr>
<br></br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<tr><button name="5">5</button></tr>
<br></br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<tr><button name="6">6</button></tr>
<br></br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<tr><button name="7">7</button></tr>
</table>
</div><!-- Left Layout Div ends -->


<div id="center_layout">
<div id="right_layout">Right Layout</div>
<div id="1">1</div>
<div id="2">2</div>
<div id="3">3</div>
<div id="4">4</div>
<div id="5">5</div>
<div id="6">6</div>
<div id="7">7</div>
</div><!-- Center Layout div ends -->

</div><!-- End of Container div -->

CSS

html, body {
        background: #FFFFFF;
        width:      100%;
        height:     100%;                   
        padding:    0;
        margin:     0;
        overflow:   auto; /* when page gets too small for container min-width/height */
    }
    #container {
        background: #FFFFFF;
        min-height: 670px;
        min-width:  600px;
        position:   absolute;
        top:        50px;   /* margins in pixels */
        bottom:     50px;   /* could also use a percent */
        left:       50px;
        right:      50px;
    }
    .pane {
        display:    none; /* will appear when layout inits */
    }

    #left_layout{
        background: #FFFFFF;
        position:   absolute;
        top:        30px;   /* margins in pixels */
        bottom:     30px;   /* could also use a percent */
        left:       20px;
        /* right:      10px; */
        min-height: 18px;
        min-width:  250px;
        /* box-shadow: 10px 10px 5px #888888;
        border: 1px; */
        /* -moz-border-radius: 8px;
        border-radius: 8px; */
    -webkit-box-shadow: 0 0 5px 2px #F8F8F8;
    -moz-box-shadow: 0 0 5px 2px #F8F8F8;
    box-shadow: 0 0 5px 2px #F8F8F8;
    background: #ffffff;
    border: 1px solid #ababab;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 5px;
    padding: 5px;
    }

    #center_layout{}

    #center_layout div{
        display: none;
        background: #F8F8F8;
        position:   absolute;
        top:        30px;   /* margins in pixels */
        bottom:     30px;   /* could also use a percent */
        left:       287px;
        right:      30px;
        min-height: 18px;
        min-width:  865px;
        /* box-shadow: 10px 10px 5px #888888; */
        /* -moz-border-radius: 8px;
        border-radius: 8px; */
        -webkit-box-shadow: 0 0 5px 2px #F8F8F8;
    -moz-box-shadow: 0 0 5px 2px #F8F8F8;
    box-shadow: 0 0 5px 2px #F8F8F8;
    background: #ffffff;
    border: 1px solid #ababab;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 5px;
    padding: 5px;

    }

JavaScript

$(document).on('click', function() {
   $('#center_layout div').hide();
    var target = '#' + $(this).html();
    $(target).show('slow');
});

Answer 1

尝试:

$(document).on('click','button', function() {
   $('#center_layout div').hide();
    var target = '#' + $(this).text();
    $(target).show('slow');
});

Updated fiddle here.