jq基本语法
<!DOCTYPE html>
<html>
<head>
<title>点一点</title>
<meta charset="utf-8">
<style type="text/css">
span{border:2px solid #ccc;display: inline-block;width: 52px; margin:30px auto;}
div{width: 1600px;}
#center{width: 300px;height: 300px;margin: 30px auto;}
</style>
<script type="text/javascript" src="http://ph7.shengqianku.cn/jquery-3.3.1.min.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
$("span").hide()
$("#bt1").click(function(){
$(".box1").show()
})
$("#bt2").click(function(){
$(".box2").show()
})
$("#bt3").click(function(){
$(".box3").show()
})
$("#bt4").click(function(){
$(".box4").show()
})
})
</script>
<div>
<div id="center">
<span class="box1">师太</span>
<span class="box2">声音</span>
<span class="box3">真好听</span>
<span class="box4">是不</span>
<br>
<button id="bt1">点一下</button>
<button id="bt2">点一下</button>
<button id="bt3">点一下</button>
<button id="bt4">点一下</button>
</div>
</div>
</body>
</html>