在按鈕點擊的jQuery中顯示div

Question

在我的頁面中有一個左固定窗格和一個由幾個不斷變化的div組成的變量右窗格。

我想按下左窗格上的按鈕。 應隱藏所需的右窗格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');
});

這里更新了小提琴。

Answer 2

也許你應該試試這個：

$('button').on('click', function() {
    $('#center_layout div').hide();
    $('#' + $(this).attr('name')).show('slow');
});

小提琴： http ： //jsfiddle.net/guvr4/4/

BTW id屬性不應該只是一個數值。

Answer 3

如果您只想使用按鈕創建活動，請嘗試以下操作：

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

更新的小提琴在這里 ，我希望這是你正在尋找的。

Answer 4

我會將參考ID放在按鈕上的data-show =“”屬性中，

這是按鈕HTML

<tr><button name="3" data-show="3">3</button></tr>

這是js

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