简单的选项卡切换效果

xiaoqibTn 发布于2019-08-29 17:24 / 2641人阅读

摘要：利用锚点的思想可以实现一个简单的选项卡切换效果。其原理就是在每个列表里塞入一个肉眼看不见的输入框，然后选项卡按钮变成元素，并通过属性与输入框的相关联，这样，点击选项按钮会触发输入框的行为，触发锚点定位，实现选项卡切换效果。

利用锚点的思想可以实现一个简单的选项卡切换效果。
页面布局及样式：


  1
  2
  3
  4


  1
  2
  3
  4
 

......

.box {
   height: 10em;
   border: 1px solid #ffffd;
   overflow: hidden;
}
.list {
   line-height: 10em;
   background: #ffffd;
}

容器设置了 overflow:hidden，且每个列表高度和容器的高度一样高，这样保证永远只显示一个列表。当我们点击按钮，如第三个按钮，会改变 URL 地址的锚链为#three，从而触发 id 为 three 的第三个列表发生的锚点定位，也就是改变容器滚动高度让列表 3 的上边缘和滚动容器上边缘对齐，从而实现选项卡效果。

但是这种方式有一定的不足之处：

其一，容器高度需要固定;

其二，锚点定位会触发窗体的重定位，也就是如果页面可以滚动，那么点击选项页面也会发生跳动

为了改变这种情况，下面利用下面的方式。页面布局为:

这样写就算页面窗体就有滚动条，绝大多数情况下，也都不会发生跳动现象。其原理就是在每个列表里塞入一个肉眼看不见的输入框，然后选项卡按钮变成元素，并通过 for 属性与输入框的 id 相关联，这样，点击选项按钮会触发输入框的 focus 行为，触发锚点定位，实现选项卡切换效果。

但是上面这种技术要想用在实际项目中还离不开JavaScript 的支持，一个是选项卡按钮的选中效果，另一个就是处理列表部分区域在浏览器外面时依然会跳动的问题。
相关处理类似下面的做法，使用 jQuery 语法:

$("label.click").removeAttr("for").on("click", function() { $(".box").scrollTop(xxx); "xxx"表示滚动数值
});

学习总结于张鑫旭老师的CSS世界第6章

云服务器 GPU云服务器 TAB切换选项卡 jquery选项卡切换 js选项卡切换 php选项卡效果源码

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/114296.html

跨终端电商平台的实现之移动端详情页多窗口切换（选项卡）效果实现

摘要：在移动端的商品详情页涉及多个内容切换的问题，这里使用选项卡设计方式，使用选项卡的设计是各大主流电商平台所采用主要形式，例如淘宝和京东。然后构造第二个函数，根据传入的现在选项卡的和要显示选项卡的，在条件语句中执行相应的滑动函数。在移动端的商品详情页涉及多个内容切换的问题，这里使用选项卡设计方式，使用选项卡的设计是各大主流电商平台所采用主要形式，例如淘宝和京东。简单的选项卡实现起来比较容...

刘明 2019-08-20 18:01 评论0 收藏0
跨终端电商平台的实现之移动端详情页多窗口切换（选项卡）效果实现

摘要：在移动端的商品详情页涉及多个内容切换的问题，这里使用选项卡设计方式，使用选项卡的设计是各大主流电商平台所采用主要形式，例如淘宝和京东。然后构造第二个函数，根据传入的现在选项卡的和要显示选项卡的，在条件语句中执行相应的滑动函数。在移动端的商品详情页涉及多个内容切换的问题，这里使用选项卡设计方式，使用选项卡的设计是各大主流电商平台所采用主要形式，例如淘宝和京东。简单的选项卡实现起来比较容...

sf_wangchong 2019-08-29 12:56 评论0 收藏0
跨终端电商平台的实现之移动端详情页多窗口切换（选项卡）效果实现

摘要：在移动端的商品详情页涉及多个内容切换的问题，这里使用选项卡设计方式，使用选项卡的设计是各大主流电商平台所采用主要形式，例如淘宝和京东。然后构造第二个函数，根据传入的现在选项卡的和要显示选项卡的，在条件语句中执行相应的滑动函数。在移动端的商品详情页涉及多个内容切换的问题，这里使用选项卡设计方式，使用选项卡的设计是各大主流电商平台所采用主要形式，例如淘宝和京东。简单的选项卡实现起来比较容...

leon 2019-08-01 17:09 评论0 收藏0
MUI框架开发HTML5手机APP(二)--页面跳转传值&底部选项卡切换

摘要：三底部选项卡切换页面底部选项卡的切换，可以说是的标志之一。两种模式的显示效果差不多，如下图可见两种模式的区别顾名思义，模式是将所有子页面的内容，分别放置到主页不同的中，当我们点击主页的不同选项卡时，切换不同的显示。概述 JRedu 　　在上一篇博客中，我们学习了如何使用Hbuilder创建一个APP，同时如何使用MUI搭建属于自己的第一款APP，没有学习的同学可以戳链接学习： http...

番茄西红柿 2019-04-23 13:37 评论0 收藏0
完美实现一个“回到顶部”

摘要：在浏览器中，页面默认滚动是在标签上，移动端大多数在标签上，在我们想要实现平滑回到顶部，只需在这两个标签上都加上准确的说，写在容器元素上，可以让容器非鼠标手势触发的滚动变得平滑，而不局限于，标签。前言在实际应用中，经常用到滚动到页面顶部或某个位置，一般简单用锚点处理或用js将document.body.scrollTop设置为0，结果是页面一闪而过滚到指定位置，不是特别友好。我们想要...

layman 2019-08-29 17:08 评论0 收藏0