<!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 class="btn btn-primary" id="btn1">按钮1</button>
<button class="btn btn-success" id="btn2">按钮2</button>
<button class="btn btn-info" id="btn3">按钮3</button>
<button class="btn btn-warning" id="btn4">按钮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"style="display: none;">
<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"style="display: none;">
<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">
//和document.ready的方法一样
$(function(){
//添加事件
$('#btn2').on('click',function(){
$('#panel2').toggle();
})
})
//改变元素的内容
// $('#panel2').html("111111");
//获取某个元素的子元素
$('#panel2 .panel-body').html('new content');
</script>
</body>
</html>