本文介绍了如何利用CSS的overflow: hidden和focus锚点实现选项卡切换功能，避免了URL锚点引起的窗体定位问题。同时，讨论了在JavaScript加载缓慢时，仍能通过tab键切换选项卡的策略，并在JS加载完成后，通过控制scrollTop实现更平滑的切换效果。源码和效果图可供参考。
通过纯css实现选项卡功能（overflow：hidden滚动依旧存在，从而可以完成锚点定位，达到切换目的），采用focus锚点，避免了url锚点触动的由内到外的窗体定位；
但是纯css还是存在缺点：当选项卡在页面外时，因为采用focus锚点，所以依然会通过tab键切换选项卡；
所以，可以配合js使用，在js加载缓慢时，依旧可以操作选项卡；当js加载完毕，通过移除label的for属性，去除css的切换功能，采用控制scrollTop来完成选项卡的切换；
css与js默契配合，优化用户体验；
附源码：
boxOne与boxThree是为了使用url锚点时检验窗体的重定位而增加的，现在使用focus锚点定位解决了窗体定位的问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>利用锚点实现选项卡_Pro(解决某些情况下触发页面窗体的重定向)</title>
<style>
a {
text-decoration: none;
}
.content {
width: 600px;
margin: auto;
/* outline: 1px solid pink; */
}
.content .box {
height: 198px;
overflow: hidden;
最低0.47元/天 解锁文章
542
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
