css实现导航栏切换

250 阅读1分钟

冲浪的时候看到了这道面试题,尝试解决一下

方式一 : tabindex 搭配 :focus (未完全实现)

tabindex是一个全局属性,适用于所有的HTML元素,用来指示元素是否可以聚焦。
tabindex的值越大,使用tab键切换时优先级就越低。
这里通过 :focus 实现会存在一个问题,:focus 自身只是聚焦,当鼠标点击页面非tab内容时,所有的tab内容都会丢失样式。

方式二 : type="radio" 搭配 :checked

通过设置type="radio"及相同name将导航所有input标签整合为单选按钮定位在父元素上方
搭配:checked实现选中按钮时兄弟节点背景颜色改变,从而实现tab栏切换效果。