zoukankan      html  css  js  c++  java
  • DYR

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="css/bootstrap.min.css" />
    <script src="js/jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
    <div class="container">
    <div class="jumbotron">
    <h1>Let's Have fun</h1>
    <button data-panelId='panel1' class="panel-button btn btn-primary" >按钮1</button>
    <button data-panelId='panel2' class="panel-button btn btn-success" >按钮2</button>
    <button data-panelId='panel3'class="panel-button btn btn-info">按钮3</button>
    <button data-panelId='panel4'class="panel-button btn btn-warning">按钮4</button>
    </div>

    <div class="row">
    <div class="col-xs-3">
    <div id="panel1" class="panel panel-primary">
    <div class="panel-heading">
    #panel1
    </div>
    <div class="panel-body">
    content
    </div>
    </div>
    </div>

    <div class="col-xs-3">
    <div id="panel2" class="panel panel-primary">
    <div class="panel-heading">
    #panel2
    </div>
    <div class="panel-body">
    content
    </div>
    </div>
    </div>

    <div class="col-xs-3">
    <div id="panel3" class="panel panel-primary">
    <div class="panel-heading">
    #panel3
    </div>
    <div class="panel-body">
    content
    </div>
    </div>
    </div>

    <div class="col-xs-3">
    <div id="panel4" class="panel panel-primary">
    <div class="panel-heading">
    #panel4
    </div>
    <div class="panel-body">
    content
    </div>
    </div>
    </div>
    </div>
    </div>
    <script type="text/javascript">
    //为每个button添加点击事件
    $('.panel-button').on('click',function(){
    //获取动态被点击的button的自定义属性值
    var panelId = $(this).attr('data-panelId');
    //进行操作
    $('#'+panelId).toggle();
    })
    </script>
    </body>
    </html>

  • 相关阅读:
    git log
    [转]深入详解javascript之delete操作符
    js性能优化文章集锦
    [转]A记录和CNAME记录的区别
    [转]200 OK (from cache) 与 304 Not Modified------没有这个规则(ETag是否移除)!!!from cache和304,请查看顶部的流程图!
    nodejs渲染到页面的理解
    git之reset
    Mayavi入门
    OpenAcc笔记——update
    Qt笔记——数据库的图形界面
  • 原文地址:https://www.cnblogs.com/weixin2623670713/p/13019010.html
Copyright © 2011-2022 走看看