摘要：<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script type="text/javascript"src="jQuery/jquery-3.3.1.min.js"></script>
<style type="text/css">
*{margin: 0px;padding: 0px;}
#div1{width: 500px;height: 500px;margin: 10px auto;}
#td1{width: 230px;height: 230px;background-color: red;padding: 10px;text-align: center;}
#td2{width: 230px;height: 230px;background-color: pink;padding: 10px;text-align: center;}
#td3{width: 230px;height: 230px;background-color: green;padding: 10px;text-align: center;}
#td4{width: 230px;height: 230px;background-color: blue;padding: 10px;text-align: center;}
.bt{width: 60px;height: 20px;border: none;}
#div2{width: 100%;height: 40px;text-align: center;}
</style>
<title>我的作業(yè)</title>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
$("td").hide();
$("#bt1").click(function(){
if($("#td1").is(":hidden")){
$("#td1").show();
}
else {
$("#td1").hide();
}
})
$("#bt2").click(function(){
if($("#td2").is(":hidden")){
$("#td2").show();
}
else {
$("#td2").hide();
}
})
$("#bt3").click(function(){
if($("#td3").is(":hidden")){
$("#td3").show();
}
else {
$("#td3").hide();
}
})
$("#bt4").click(function(){
if($("#td4").is(":hidden")){
$("#td4").show();
}
else {
$("#td4").hide();
}
})
})
</script>
<div id="div2">
<input type="button" name="" value="紅色"id="bt1"class="bt">
<input type="button" name="" value="粉色"id="bt2"class="bt">
<input type="button" name="" value="綠色"id="bt3"class="bt">
<input type="button" name="" value="藍色"id="bt4"class="bt">
</div>
<div id="div1">
<table>
<tr>
<td id="td1"></td>
<td id="td2"></td>
</tr>
<tr>
<td id="td3"></td>
<td id="td4"></td>
</tr>
</table>
</div>
</body>
</html>
比js方便很多,但是也需要Js的基礎(chǔ),實踐出真知,多聯(lián)系才是關(guān)鍵
批改老師：韋小寶批改時間：2019-03-05 09:06:13
老師總結(jié)：寫的沒毛病 總結(jié)的也很對 jQuery就是一個封裝的js庫 理解了js的基礎(chǔ)學(xué)起jQuery毫無壓力