页面切换效果

作者: 晴天3521 | 来源:发表于2019-11-05 12:59 被阅读0次

3、Mpvue配置底部Tab栏切换、页面引入图片、请求数据
页面切换效果
页面切换效果
实现图片的切换
路由
ViewPager页面切换效果
看我72变 | 把PPT平滑切换玩出新高度
layaBox:列表list使用selectHandler监听点
Framer X 创建自定义页面切换组件
Vue实现简易翻页效果

今天我们来学习一下如何使用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>

好了，今天的分享就到这里了！
愿你三冬暖，愿你春不寒；愿你天黑有灯，下雨有伞。

小晴天