div在按钮上单击显示在jQuery中

弱者

在我的页面中有一个左固定窗格,有一个可变的右窗格,该窗格由几个变化的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');
});
手性

尝试:

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

在这里更新了小提琴。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

在按钮单击jquery上隐藏/显示div

来自分类Dev

在按钮单击MVC上显示局部视图

来自分类Dev

jQuery附加在按钮上单击显示文本然后消失

来自分类Dev

在按钮上单击列表中的绑定网格视图

来自分类Dev

使用Jquery在按钮单击上显示模态

来自分类Dev

使用Jquery在按钮单击上隐藏/显示Div

来自分类Dev

在按钮单击jquery上显示非唯一的div类

来自分类Dev

UIAlertController在按钮上单击

来自分类Dev

如何使用JavaScript在按钮单击上显示内容

来自分类Dev

在按钮上加载新组件单击在ReactJs中?

来自分类Dev

单击时,tkinter会在按钮上递增显示整数

来自分类Dev

jQuery在按钮上单击不起作用

来自分类Dev

在按钮上添加数字单击使用jQuery吗?

来自分类Dev

jQuery:在按钮下方显示div

来自分类Dev

jQuery附加在按钮上单击显示文本然后消失

来自分类Dev

在按钮上显示div单击

来自分类Dev

单击按钮上的jQuery显示并隐藏最接近的div

来自分类Dev

jQuery的/ HTML检查单选按钮上的div单击,并允许每个名称组中的1个div突出显示?

来自分类Dev

使用jquery ajax在按钮单击上的POST表单

来自分类Dev

Android软键盘未在按钮单击上显示

来自分类Dev

jQuery Mobile在按钮单击事件上显示本机选择菜单

来自分类Dev

UIAlertController在按钮上单击

来自分类Dev

如何使用AngularJS在按钮单击上显示(隐藏的)<td>?

来自分类Dev

如何在按钮上的<form>中添加<div>单击html和jquery

来自分类Dev

在按钮单击和选项上添加新的div以选择显示文本框的选项

来自分类Dev

通过 Javascript / jQuery 在按钮单击时显示 Bootstrap 警报

来自分类Dev

JQuery 在按钮单击时显示上一条消息

来自分类Dev

使用 jquery 在按钮单击时复制表或 div 内容

来自分类Dev

如何在按钮单击时显示引导折叠 div?

Related 相关文章

  1. 1

    在按钮单击jquery上隐藏/显示div

  2. 2

    在按钮单击MVC上显示局部视图

  3. 3

    jQuery附加在按钮上单击显示文本然后消失

  4. 4

    在按钮上单击列表中的绑定网格视图

  5. 5

    使用Jquery在按钮单击上显示模态

  6. 6

    使用Jquery在按钮单击上隐藏/显示Div

  7. 7

    在按钮单击jquery上显示非唯一的div类

  8. 8

    UIAlertController在按钮上单击

  9. 9

    如何使用JavaScript在按钮单击上显示内容

  10. 10

    在按钮上加载新组件单击在ReactJs中?

  11. 11

    单击时,tkinter会在按钮上递增显示整数

  12. 12

    jQuery在按钮上单击不起作用

  13. 13

    在按钮上添加数字单击使用jQuery吗?

  14. 14

    jQuery:在按钮下方显示div

  15. 15

    jQuery附加在按钮上单击显示文本然后消失

  16. 16

    在按钮上显示div单击

  17. 17

    单击按钮上的jQuery显示并隐藏最接近的div

  18. 18

    jQuery的/ HTML检查单选按钮上的div单击,并允许每个名称组中的1个div突出显示?

  19. 19

    使用jquery ajax在按钮单击上的POST表单

  20. 20

    Android软键盘未在按钮单击上显示

  21. 21

    jQuery Mobile在按钮单击事件上显示本机选择菜单

  22. 22

    UIAlertController在按钮上单击

  23. 23

    如何使用AngularJS在按钮单击上显示(隐藏的)<td>?

  24. 24

    如何在按钮上的<form>中添加<div>单击html和jquery

  25. 25

    在按钮单击和选项上添加新的div以选择显示文本框的选项

  26. 26

    通过 Javascript / jQuery 在按钮单击时显示 Bootstrap 警报

  27. 27

    JQuery 在按钮单击时显示上一条消息

  28. 28

    使用 jquery 在按钮单击时复制表或 div 内容

  29. 29

    如何在按钮单击时显示引导折叠 div?

热门标签

归档