页面切换效果
2019-11-05 本文已影响0人
晴天3521
今天我们来学习一下如何使用JQ实现对页面之间的切换，我们先来看一下效果图，点击不同的显示按钮，就会出现不同的颜色盒子。
显示1
显示2
接下来我们来分析一下原理！
1.其实是五个颜色盒子叠在一起，默认第一个显示
2.当点击显示1按钮时，第一个颜色盒子显示show，其他四个颜色盒子隐藏hide
然后，我们放上代码！(代码已精简过)
<body>
<button onclick="showdiv(1)">显示1</button>
<button onclick="showdiv(2)">显示2</button>
<button onclick="showdiv(3)">显示3</button>
<button onclick="showdiv(4)">显示4</button>
<button onclick="showdiv(5)">显示5</button>
<div>
<div id="div1"
style="width:500px;height:500px;background-color: antiquewhite;position: absolute;top: 50px;left:0px;display: block">
</div>
<div id="div2"
style="width:500px;height:500px;background-color:black;position: absolute;top: 50px;left:0px;display: none"></div>
<div id="div3"
style="width:500px;height:500px;background-color: rgb(64, 135, 163);position: absolute;top: 50px;left:0px;display: none">
</div>
<div id="div4"
style="width:500px;height:500px;background-color: rgb(160, 125, 79);position: absolute;top: 50px;left:0px;display: none">
</div>
<div id="div5"
style="width:500px;height:500px;background-color: rgb(240, 25, 25);position: absolute;top: 50px;left:0px;display: none">
</div>
</div>
</body>
<script>
function showdiv(divId) {
for (var i = 1; i < 6; i++) {
if (i === divId) {
$("#div" + i).show()
} else {
$("#div" + i).hide()
}
}
}
</script>
好了，今天的分享就到这里了！
愿你三冬暖，愿你春不寒；愿你天黑有灯，下雨有伞。
小晴天
