Question

在我的页面中有一个左侧固定窗格＆amp;一个可变的右窗格，由几个不断变化的div组成。

我希望点击左侧窗格上的按钮。所需的右侧窗格div show show＆amp;其他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.

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');
});

updated fiddle is here，我希望这就是你要找的。

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');
});

在按钮点击的jQuery中显示div

4 个答案: