利用锚点 :target 实现纯 CSS 的 tab 分页切换 - 風雲論壇

» 欢迎您，客人：登录 | 注册 | 微博 |

風雲論壇 → 脚本中心 → 浏览：帖子主题

* 帖子主题：利用锚点 :target 实现纯 CSS 的 tab 分页切换

風雲 (ID: 3)

头衔：论坛版主

等级：大天使

积分：1632
发帖：72 篇
来自：保密
注册：2022/3/30 15:28:53
造访：2024/12/21 22:25:57

[ 第 1 楼 ]

Google 最新出了一个 :has 选择器，可以很方便的判断子元素属性来确定当前元素的样式，但是Chrome 发明的，暂时还不通用。尝试用 :target 来实现 tab 分页：

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

2022/12/8 9:39:33

IP：已设置保密

風雲 (ID: 3)

头衔：论坛版主

等级：大天使

积分：1632
发帖：72 篇
来自：保密
注册：2022/3/30 15:28:53
造访：2024/12/21 22:25:57

[ 第 2 楼 ]

上面的缺点是必须通过点击触发锚点才能选中第一页。然后想到了一招更好的办法，还是利用 radio 来实现：

<style type="text/css">
.tabpage{ border: 1px solid #ccc; border-radius: 1mm; width: 4in; float: left; margin-right: 4mm }
.page{ padding: 2mm 4mm; height: 2in; overflow: auto }
.tabpage .radio{ display: none }
.tabpage .tabs{ background-color: #ddd; padding: 1mm 0mm 0mm 3mm; display: flex; color: #777 }
.tabpage .tabs label{ padding: 2mm 4mm; border-radius: 1mm 1mm 0mm 0mm; vertical-align: middle }
.tabpage .radio:nth-of-type(1):checked ~ .tabs label:nth-of-type(1),
.tabpage .radio:nth-of-type(2):checked ~ .tabs label:nth-of-type(2) { background-color: #fff; color: #000 }
.tabpage .radio:nth-of-type(1):not(:checked) ~ .pages .page:nth-of-type(1),
.tabpage .radio:nth-of-type(2):not(:checked) ~ .pages .page:nth-of-type(2) { display: none }
</style>

<div class="tabpage">
	<input class="radio" type="radio" name="tab" id="tab1" checked="true">
	<input class="radio" type="radio" name="tab" id="tab2">
	<div class="tabs">
		<label for="tab1">tab1</label>
		<label for="tab2">tab2</label>
	</div>
	<div class="pages">
		<div class="page">内容1</div>
		<div class="page">内容2</div>
	</div>
</div>

<div class="tabpage">
	<input class="radio" type="radio" name="tab2" id="tab21" checked="true">
	<input class="radio" type="radio" name="tab2" id="tab22">
	<div class="tabs">
		<label for="tab21">tab1</label>
		<label for="tab22">tab2</label>
	</div>
	<div class="pages">
		<div class="page">内容1</div>
		<div class="page">内容2</div>
	</div>
</div>

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

Edge的 IE 模式测试也通过。

2022/12/8 10:11:54

IP：已设置保密

pojin (ID: 2)

等级：风云使者

积分：318
发帖：2 篇
来自：保密
注册：2022/3/30 11:42:27
造访：2024/12/21 22:23:34

[ 第 3 楼 ]

Good！

2022/12/8 16:43:33

IP：已设置保密

快速回复主题

账号/密码

用户：没有注册？密码：

评论内容