前端技巧纯CSS制作TAB标签切换效果的简单方法

纯CSS制作TAB标签切换效果的简单方法

网页的TAB标签切换效果在很多大型网站都可以见到,TAB标签可以在有限的位置里展示更多的内容,让网页的内容分类更清晰,同时也增强了用户的互动性,本文制作的TAB切换效果原理是利用单选按钮来完成对标签的选择,利用定位和z-index层级来决定标签是否显示:

假设我要做的TAB标签为3个,所以我先做3个div块分别包含相应的内容,例如:

<div class="tab">
 <input id="check1" type="radio" name="t" checked="checked" />
 <label for="check1">周杰伦</label>
 <div class="content">
 <ul>
 <li>我会学着放弃你是因为我太爱你</li>
 <li>谁在用琵琶弹奏一曲东风破</li>
 <li>等到放晴的那天也许我会比较好一点</li>
 <li>雨下整夜我的爱溢出就像雨水</li>
 </ul>
 </div>
</div>
<div class="tab">
 <input id="check2" type="radio" name="t" />
 <label for="check2">林俊杰</label>
 <div class="content">
 <ul>
 <li>冻结那爱恋冻结吻你那瞬间</li>
 <li>原来最疼痛的表情竟是没有情绪</li>
 <li>等不到天黑烟火不会太完美</li>
 <li>我才终于明白办不到的承诺就成了枷锁</li>
 </ul>
 </div>
</div>
<div class="tab">
 <input id="check3" type="radio" name="t" />
 <label for="check3">王力宏</label>
 <div class="content">
 <ul>
 <li>我依然爱你这是唯一的退路</li>
 <li>旅途的前后多余只为遇见你</li>
 <li>如果世界太危险只有音乐最安全</li>
 <li>我专一浪漫但只会为我爱的人而浪漫</li>
 </ul>
 </div>
</div>

这里每个TAB部分都放在一个div块里,每个div块包含一个单选按钮,这里给每个单选按钮增加了一个label标签便于设置样式,因为在label元素内点击文本,就会触发对应的单选按钮。

为了整体的美观,我将这3个标签的内容都放到一个大的div框里:

<div class="wrap"> …… </div>

接下来简单的设置一下这个包裹框的基本样式:

.wrap {
width:360px;
height:230px;
border:1px solid #ccc;
position:relative; /*--设置relative方便之后内容框的定位--*/
}

设置tab标签向左浮动,让这3个标签并排显示:

.tab {float:left;}

设置单选框点击区域的样式,为了美观,将按钮本身隐藏。只需要保留label作为点击区域:

.tab label {
width:120px;
height:40px;
line-height:40px;
display:block;
cursor:pointer;
text-align:center;
}
.tab input {display:none;}

设置内容框的样式,将其定位到“按钮”的下方并设置一个层级:

.content {
position:absolute;
top:40px;
left:0;
width:360px;
height:190px;
z-index:-1;
}

重点是下面这句CSS样式:

.tab input:checked ~ .content {
z-index:1; /*--通过层级的设置,将需要显示的标签内容显示出来--*/
background:#fafafa;
}

这里的“input:checked”表示选中后的单选按钮,“~”符号表示同级元素,整个选择器的意思是:选择与选中后的单选按钮同级的class为content元素。

接下来为了美观,还需要设置当前TAB标签的标题样式:

.tab input:checked ~ label {background:#fafafa;}

同样道理,这句样式表示将选中后的按钮同级的label标签背景设置为该TAB标签相同的背景,这样在视觉上就比较统一了:

TAB.png

当然实现TAB标签切换效果的方法远不止这一种,本文的方法提供了一个很好的思路,以及充分的运用了CSS中的同级元素选择器

站长Colin Gao,85后自由职业者,爱钻研,爱学习网页设计。建立本站的目的是整理学习笔记,分享学习经验,认识更多的朋友。感谢您阅读本站的文章,部分内容参考了网上的一些教程,但我会尽量根据自己的理解写更多原创的东西,本站网址如下,欢迎转载:
如果方便的话,转载请注明来自:http://www.cssaaa.com/skill/135.html