jQuery --点击不同按钮显示其相应的页面
1.
2.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="jquery/jquery-3.3.1.min.js"></script>
<style type="text/css">
.div{
width: auto;
height: 350px;
border: 1px solid black;
float: left;
}
table{
width: 420px;
border: 1px solid black;
}
tr td{
border-bottom: 2px;
border-bottom-style: dashed ;
border-bottom-color: black;
}
</style>
<script>
$(
function(){
$("#jingdian").click(
function(){
$(".jingdian").show();
$("#jingdian").css("color"," aqua");
$("#rebuo").css("color"," gray");
$(".rebuo").hide();
}
)
}
)
$(
function(){
$("#rebuo").click(
function(){
$(".rebuo").show();
$("#rebuo").css("color"," aqua");
$("#jingdian").css("color"," gray");
$(".jingdian").hide();
}
)
}
)
</script>
</head>
<body>
<div class="div">
<div class="title">
<h3><div style=" float: left;margin-left: 20px;margin-right: 150px">电影排行</div>
<div id="rebuo" style="float: left;margin-right: 20px">热播</div><div id="jingdian">经典</div>
</h3>
</div>
<div class="body">
<div class="rebuo" style="float: left">
<table cellpadding="8" cellspacing="3" >
<tr>
<td>1.终结者5</td>
<td>阿诺德施瓦辛格</td>
</tr>
<tr>
<td>2.飓风营救</td>
<td>连姆尼森</td>
</tr>
<tr>
<td>3.我是**</td>
<td>威尔史密斯</td>
</tr>
<tr>
<td>4.一线生机</td>
<td>杰森斯坦森</td>
</tr>
<tr>
<td>5.罗马假日</td>
<td>格里离利派克</td>
</tr>
<tr>
<td>6.史密斯夫妇</td>
<td>布拉德皮特</td>
</tr>
<tr>
<td>7.午夜邂逅</td>
<td>克里斯埃文斯</td>
</tr>
</table>
</div>
<div class="jingdian" style="display: none">
<table cellpadding="8" cellspacing="3" >
<tr>
<td>1.机械师2：复活</td>
<td>杰森斯坦森</td>
</tr>
<tr>
<td>2.变形金刚</td>
<td>希亚拉博夫</td>
</tr>
<tr>
<td>3.暮光之城</td>
<td>克里斯丁斯图尔特</td>
</tr>
<tr>
<td>4.怦然心动</td>
<td>玛德琳卡罗尔</td>
</tr>
<tr>
<td>5.电话情缘</td>
<td>杰西麦特卡尔菲</td>
</tr>
<tr>
<td>6.超凡蜘蛛侠</td>
<td>安德路加菲尔德</td>
</tr>
<tr>
<td>7.雷神</td>
<td>克里斯海姆斯沃斯</td>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>