在按钮点击的jQuery中显示div

Question

Have a left fixed pane in my page & a variable right pane which is composed of several changing divs.

I want on the button click on the left pane. The required right pane div show show & other divs should be hidden.

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

This is what I've achieved so far. But its not working can anyone help me with this.

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

Try:

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

Updated fiddle here.

Answer 2

Maybe you should try this:

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

Fiddle: http://jsfiddle.net/guvr4/4/

BTW the id attribute should not be just a numeric value.

Answer 3

If you want to create an event with the buttons only, try this:

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

The updated fiddle is here , I hope this is what you are looking for.

Answer 4

I would put the reference ID in a data-show="" attribute on the button,

Here's button HTML

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

Here's the js

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