利用锚点：target 实现纯 CSS 的 tab 分页切换 - 社区

» 欢迎您，客人：登录 | 注册 | 找回密码 | 微博 |

社区 → 脚本中心 → 浏览：帖子主题

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

pojin (ID: 1)

头衔：论坛坛主

等级：究级天王[荣誉]

积分：2826
发帖：230 篇
来自：保密
注册：2023-12-09 09:36:49
造访：2026-05-05 13:56:22

[ 第 1 楼 ] 84

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

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

2024-02-01 21:30:42

IP：已设置保密

pojin (ID: 1)

头衔：论坛坛主

等级：究级天王[荣誉]

积分：2826
发帖：230 篇
来自：保密
注册：2023-12-09 09:36:49
造访：2026-05-05 13:56:22

[ 第 2 楼 ] 85

上面的缺点是必须通过点击触发锚点才能选中第一页。然后想到了一招更好的办法，还是利用 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 }
label{ cursor: pointer };
</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>

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

2024-02-01 21:31:13

IP：已设置保密

快速回复主题

账号/密码

用户：没有注册？密码：

评论内容