纯css实现选项卡

Posted on | In | Visitors:

选项卡是个很常见的小组件，总结一下想到的知识点和方法

这里就拿一般意义上的横向选项卡来说，一般来说会结合点击/鼠标移入实现效果的变化，如下拉菜单，背景变化等。

选项卡是个很常见的小组件，总结一下想到的知识点和方法

这里就拿一般意义上的横向选项卡来说，一般来说会结合点击/鼠标移入实现效果的变化，如下拉菜单，背景变化等

  1. 布局

float 肯定是可以实现的，absolute+float:left+li，将列表横向布局实现。

如果用这种方法，免不了要想 浮动 可能引发的问题 - 父级高度塌陷。解决的方法也很容易搜到，“古老”方法可以在结构最后添加一个空div清除浮动；“现代”方法用::after伪元素也分分钟解决，注意要设置伪元素为块级元素block才能出现效果，加上clear:both

接下来可能会引申到两端对齐 还可以用inline-block+text-align: justify 实现两端对齐，不过其默认对最后一行无效，新浏览器可配合text-align-last: justify使用。面对兼容问题一样可以使用添加空div或者伪元素，设置display: inline-block，并设置宽度为 100%

另外也可以 flex ，操作更加容易一些

  1. 切换
利用 checked 及相关伪类

利用input radio的单选特性实现切换，最后清除radio选项的视觉显示

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
<!DOCTYPE html>
<!-- 纯css实现选项卡切换：利用checkbox及相关伪类 -->
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#box {
				width: 450px;
				background: whitesmoke;
				margin: 50px auto;
				padding: 20px;
				padding-top: 56px;
				border-radius: 8px;
				position: relative;
			}
			#box span {
				position: absolute;
				width: 150px;
				text-align: center;
				height: 36px;
				line-height: 36px;
				border-radius: 8px 8px 0 0;
				background: silver;
				top: 20px;
			}
			#box label:nth-child(1) span{
				left: 20px;
			}
			#box label:nth-child(2) span{
				left: 170px;
			}
			#box label:nth-child(3) span{
				left: 320px;
			}
			#box ul{
				margin: 0;
				padding: 0;
				list-style: none;
				background: white;
				padding: 10px;
				line-height: 26px;
				display: none;
			}
			#box li{
				height: 26px;
				overflow: hidden;
			}
			#box li:hover{
				color: orangered;
			}
			#box input {
				display: none;
			}
			#box input:checked ~ ul {
				display: block;
			}
			#box input:checked ~ span {
				background: white;
			}

		</style>
	</head>
	<body>
		<div id="box">
			<label>
				<input type="radio" name="tab" id="tab1" checked="checked"/>
				<span>今日要闻</span>
				<ul>
					<li>免费游戏如何让玩家们爆肝?日常任务从早到晚都做不完</li>
					<li>免费游戏如何让玩家们爆肝?日常任务从早到晚都做不完</li>
					<li>免费游戏如何让玩家们爆肝?日常任务从早到晚都做不完</li>
					<li>免费游戏如何让玩家们爆肝?日常任务从早到晚都做不完</li>
					<li>免费游戏如何让玩家们爆肝?日常任务从早到晚都做不完</li>
				</ul>
			</label>

			<label>
				<input type="radio" name="tab" id="tab2" />
				<span>热门活动</span>
				<ul>
					<li>《自走棋手游》为了不被国内大厂借鉴 把自己改的面目全非</li>
					<li>《自走棋手游》为了不被国内大厂借鉴 把自己改的面目全非</li>
					<li>《自走棋手游》为了不被国内大厂借鉴 把自己改的面目全非</li>
					<li>《自走棋手游》为了不被国内大厂借鉴 把自己改的面目全非</li>
					<li>《自走棋手游》为了不被国内大厂借鉴 把自己改的面目全非</li>
				</ul>
			</label>

			<label>
				<input type="radio" name="tab" id="tab3" />
				<span>热点话题</span>
				<ul>
					<li>邀请玩家一起共创全新NPC角色赢取海量QB</li>
					<li>邀请玩家一起共创全新NPC角色赢取海量QB</li>
					<li>邀请玩家一起共创全新NPC角色赢取海量QB</li>
					<li>邀请玩家一起共创全新NPC角色赢取海量QB</li>
					<li>邀请玩家一起共创全新NPC角色赢取海量QB</li>
					<li>邀请玩家一起共创全新NPC角色赢取海量QB</li>
				</ul>
			</label>
		</div>
	</body>
</html>

checked实现

利用 锚点实现 herf + :target

利用a将href与对应的id绑定，调整显示层级z-index实现切换

要注意利用a的话，点击之后后会自动跳转到 以对应id元素为页面顶端的位置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			div{
				border: 1px black solid;
				position: relative;
			}
			div span{
				display: flex;
			}
			div span>a{
				flex: 1;
				text-align: center;
				line-height: 48px;
				color: white;
				background: cornflowerblue;
			}
			div ul li{
				position: absolute;
				width: 100%;
				height: 20vw;
				background: red;
				left: 0;
				top: 48px;
			}
			div :target{
				z-index: 55;
			}
		</style>
	</head>
	<body>
<!--
		<h1>title</h1>
		<h1>title</h1>
		<h1>title</h1> -->
		<div>
			<span>
				<a href="#tab1">tab1</a>
				<a href="#tab2">tab2</a>
				<a href="#tab3">tab3</a>
			</span>
			<ul>
				<li id="tab1">tab content1</li>
				<li id="tab2">tab content2</li>
				<li id="tab3">tab content3</li>
			</ul>
		</div>
		<h1>title</h1>
		<h1>title</h1>
		<h1>title</h1>
		<h1>title</h1>
		<h1>title</h1>
		<h1>title</h1>
		<h1>title</h1>
		<h1>title</h1>
		<h1>title</h1>
		<h1>title</h1>
		<h1>title</h1>
		<h1>title</h1>
		<h1>title</h1>
<!-- 		<h1>title</h1>
		<h1>title</h1>
		<h1>title</h1> -->
	</body>
</html>

href+target实现

利用 js

直观上想，可以直接利用 js onmouseover onclick 等实现，不过这就不属于纯 css 实现的范畴了