風雲論壇脚本中心 → 浏览:帖子主题
* 帖子主题:利用锚点 :target 实现纯 CSS 的 tab 分页切换
風雲 (ID: 3)
头衔:论坛版主
等级:天使
积分:1474
发帖:66
来自:保密
注册:2022/3/30 15:28:53
造访:2024/7/15 10:02:25
[ 第 1 楼 ] 回复
Google 最新出了一个 :has 选择器,可以很方便的判断子元素属性来确定当前元素的样式,但是Chrome 发明的,暂时还不通用。尝试用 :target 来实现 tab 分页:

[您可以先修改代码再运行]

2022/12/8 9:39:33 IP:已设置保密
風雲 (ID: 3)
头衔:论坛版主
等级:天使
积分:1474
发帖:66
来自:保密
注册:2022/3/30 15:28:53
造访:2024/7/15 10:02:25
[ 第 2 楼 ] 回复
上面的缺点是必须通过点击触发锚点才能选中第一页。然后想到了一招更好的办法,还是利用 radio 来实现:

[您可以先修改代码再运行]

Edge的 IE 模式测试也通过。
2022/12/8 10:11:54 IP:已设置保密
pojin (ID: 2)
等级:风云使者
积分:270
发帖:1
来自:保密
注册:2022/3/30 11:42:27
造访:2024/7/14 20:16:24
[ 第 3 楼 ] 回复
Good!
2022/12/8 16:43:33 IP:已设置保密
分页: 1, 共 1 页
快速回复主题
账号/密码
用户: 没有注册? 密码:
评论内容