DON’T REPEAT YOURSELF
- 尽可能的精简你的代码
- 在具有关联关系的元素中，由1可知2（在第一个元素中包含第二个元素的信息）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>the use of jQuery</title>
<style>
*{
margin: 0;
padding: 0;
}
h1{
height: 300px;
line-height: 300px;
}
header{
width: 100%;
height: 400px;
text-align: center;
background-color: gray;
font-size: 40px;
color: white;
}
button{
width: 80px;
height: 40px;
border: none;
border-radius: 5px;
}
main{
display: flex;
padding: 20px;
width: 100%;
height: 120px;
}
.col-xs-3{
margin: auto;
width: 25%;
height: 120px;
}
.box{
width: 100px;
height: 100px;
display: none;
}
.box-head{
width: 100px;
height: 40px;
text-align: center;
line-height: 40px;
background-color: cornflowerblue;
border-radius: 5px 5px 0 0 ;
border: cornflowerblue 1px solid;
}
.box-content{
width: 100px;
height: 60px;
text-align: center;
line-height: 60px;
border-radius: 0px 0px 5px 5px;
border: cornflowerblue 1px solid;
}
</style>
</head>
<body>
<header>
<div class="jumbotron">
<h1>Learn jQuery</h1>
<button class="box-btn" data-boxId="box1">#btn1</button>
<button class="box-btn" data-boxId="box2">#btn2</button>
<button class="box-btn" data-boxId="box3">#btn3</button>
<button class="box-btn" data-boxId="box4">#btn4</button>
</div>
</header>
<main>
<div class="col-xs-3">
<div id="box1" class="box">
<div class="box-head">#box1</div>
<div class="box-content">content</div>
</div>
</div>
<div class="col-xs-3">
<div id="box2" class="box">
<div class="box-head">#box1</div>
<div class="box-content">content</div>
</div>
</div>
<div class="col-xs-3">
<div id="box3" class="box">
<div class="box-head">#box1</div>
<div class="box-content">content</div>
</div>
</div>
<div class="col-xs-3">
<div id="box4" class="box">
<div class="box-head">#box1</div>
<div class="box-content">content</div>
</div>
</div>
</main>
<script src="/jQuery/js/jquery-3.5.1.js"></script>
<script>
$(function() {
$(".box-btn").on('click',function(){
var boxId = $(this).attr('data-boxId');
$('#'+boxId).toggle();
});
});
</script>
</body>
</html>
