简单的tab切换效果

时间：2023-03-30 21:51:19 CSS

利用锚点的思想可以实现简单的tab切换效果。页面布局和样式：1

1234.......盒子{高度：10em;边框：1px实心#ddd；溢出：隐藏；}.list{行高：10em；background:#ddd;}容器设置overflow:hidden，每个列表的高度与容器的高度相同，这样一直只显示一个列表。当我们点击按钮时，比如第三个按钮，它会将url地址的锚链改为#three，从而触发id为三的第三个列表的锚点定位，即改变滚动高度containertomaketopedgeoflist3与scrollcontainer的上边缘对齐，实现tab效果。但是这种方法有一定的缺点：首先，容器的高度需要固定；第二，锚点定位会触发表单的重新定位，即如果页面可以滚动，点击选项页面也会跳转，以便改变这种情况，下面使用如下方法。页面布局为：12341234即使页面表单有滚动条，在大多数情况下，和不会出现跳跃现象。原理是在每个列表中插入一个不可见的输入框，然后tab按钮变成一个元素，通过for属性关联到输入框的id。这样，点击选项按钮就会触发输入框的焦点行为，触发锚点定位，实现tab切换效果。但是，如果要在实际项目中使用上述技术，就离不开JavaScript的支持。一是tab按钮的选择效果，二是处理列表部分区域在浏览器外时仍会跳转的问题。相关处理类似下面，使用jQuery语法：$('label.click').removeAttr('for').on('click',function(){$('.box').scrollTop(xxx);'xxx'表示滚动值});学习总结在张新旭老师的CSS世界第6章

上一篇：Vue开发高仿陌陌视频看直播APP，全栈

下一篇：IE盒模型和W3C标准盒模型的区别

简单的tab切换效果相关文章