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>

  • 相关阅读:
    asp.net 对母版页的控件事件
    treeview操作集合
    使用GAppProxy时安全证书无效的解决办法
    向Excel模板中添加数据
    C# 重写 winform 关闭按钮
    完整ASP.Net Excel导入程序(支持2007)
    随笔二则
    标记枚举(flags)的使用
    System.Reflection.Missing.Value与Type.Missing
    Windows下Android源码下载方法
  • 原文地址:https://www.cnblogs.com/weixin2623670713/p/13019010.html
Copyright © 2011-2022 走看看