SEE Conf 2021!  支付宝体验科技大会

纯CSS3制作Tabs选项卡

特别声明:如果您喜欢小站的内容,可以点击申请会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!或添加QQ:874472854(^_^)

Tabs选项卡对于Web前端攻城师来说并不陌生,也制作了不少,我们在《CSS3+jQuery制作切角的Tabs》也介绍了一个使用CSS3配合jQuery制作Tabs的实例。我想大家在制作Tabs选项卡大多数都是使用jQuery或者javaScript来实现的。而单独使用纯CSS来制作Tabs来说还是比较少见。随着CSS3和CSS技术不断的更新,我们放弃使用jQuery或javaScrip来制作Tabs选项卡从此不在是一件难事了,那么今天我就要和你一起见证这一事实——使用纯CSS制作Tabs选项卡。

使用纯CSS来制作Tabs选项卡,我们主要是借助CSS的“:hover”来实现。使用“:hover”制作Tabs选项卡,前提有一个条件,那就是不考虑IE6浏览器下的效果。具体原因我想不用我说大家都知道了,那就是因为在IE6浏览器下只有<a>元素支持“:hover”,那么如果其他元素要使用“:hover”就必须借助jQuery(具体如何实现大家可以参考前面的《浏览器兼容之旅的第四站:IE常见Bug——part2》),这样一来就违背了我们的初衷,所以我们在此放弃IE6浏览器下的效果。别的先不说了,我们一起进入今天的主题吧。

HTML Markup

制作Tabs的结构大家在熟悉不过了,下面我们也按老样子创建一个结构清洁具有语义化的Tabs选项卡的HTML Markup。

			<div id="cssTabs">
				<div id="tab1" class="uiTab">
					 <h3 class="tabHead">Header for Tab1</h3
					 <div class="tabContent">Content for Tab1</div>
				</div>
				<div id="tab2" class="uiTab">
					 <h3 class="tabHead">Header for Tab2</h3>
					 <div class="tabContent">Content for Tab2</div>
				</div>										 
				<div id="tab3" class="uiTab">
					 <h3 class="tabHead">Header for Tab3</h3>
					 <div class="tabContent">Content for Tab3</div>
				</div>
			</div>
		

在上面的HTML Markup中,我们拥有:

  1. 有一个div,包含了Tabs所有内容——div#cssTabs;
  2. 三个Tabs选项,而且每个选项放在一个div中——div#tab1,div#tab2,div#tab3
  3. 在各个div#tabs中包含了一个标题h3.tabHead和选项卡所对应的内容div#tabContent

CSS Code

结构有了,我们现在需要的就是给Tabs样式了。

			/*CSS Tabs style*/
			#cssTabs {
				 position: relative;
				 width: 600px;
				 height: 290px;
				 margin: 0 auto;
			}
			.tabHead {
				 font-weight: normal;
				 padding: 5px;
				 height: 30px;
				 line-height: 30px;
				 text-align: center;
				 border: 1px solid #000;
				 border-width: 1px 1px 0;
				 -moz-border-radius: 5px 5px 0 0;
				 -webkit-border-radius: 5px 5px 0 0;
				 border-radius: 5px 5px 0 0;
				 width: 140px;
				 position: absolute;
				 left: 0;
				 top: 0;
				 background: #fff;
				cursor: pointer;
			}
			.tabContent {
				 padding: 10px 20px;
				 background: #fff;
				 border: 1px solid #000;
				 position: absolute;
				 top: 40px;
				 left: 0;
				 height: 230px;
				 width: 100%;
			}
			#tab1 .tabHead {
				 z-index: 3;
			}
			#tab2 .tabHead {
				 left: 155px;
				 z-index: 1;
			}					 
			#tab3 .tabHead {
				left: 310px;
				z-index: 1;
			}				 
			#tab1 .tabContent {
				z-index: 2;
			}
		

这里我们主要使用了绝对定位来给Tabs定的位,并且使用“z-index”的不同值来控制各个元素的层次关系。首先给每个Tabs的标题进行位置定位,使其横排在顶部,并按先后顺序排列;而Tabs对应的主内容也进行绝对定位,并且安放在同一位置。现在最关键的就是他们所在Z轴的先后顺序,我们主要使用“z-index”来控制其层次,首先将所有"tabHead"定在“1”层位置,而所有内容定位在“2”层位置,这样一来让所有标题都在对应的内容下面,但为了主选项卡标题和主内容能相互对应,增强视觉效果,在将“tab1”的“tabHead”提高到所有内容上面,此处将其设置值为“3”,具体代码如上,其修饰后的效果如下所示:

接下来是我们使用CSS实现Tabs功能的关键一步,此处我们只是实现“hover”状态的Tabs效果,也就是说,当鼠标移动到对应的标题上,显示相对应的选项卡内容,比如说我们将鼠标移动到“tab2”的标题上,显示相对应的主内容,但当我们鼠标离开所有选项卡标题位置时,以恢复到默认状态,也就是上图显示的样子。那么下面我们来看如何使用“:hover”来实现其功能:

			#tab1:hover h3,
			#tab1:focus h3,
			#tab1:active h3,
			#tab2:hover h3,
			#tab2:focus h3,
			#tab2:active h3,
			#tab3:hover h3,
			#tab3:focus h3,
			#tab3:active h3 {
				z-index: 4;
				font-weight: bold;
			}
			#tab1:hover .tabContent,
			#tab1:focus .tabContent,
			#tab1:active .tabContent,
			#tab2:hover .tabContent,
			#tab2:focus .tabContent,
			#tab2:active .tabContent,
			#tab3:hover .tabContent,
			#tab3:focus .tabContent,
			#tab3:active .tabContent {            
				 z-index: 3;
			}
		

上面的代码是我们实现Tabs功能的关键一步,分别在各“tabs”的"hover",“focus”和“active”状态下,改变相应的“z-index”的层次关系。这里有一点需要保证“首先要将"hover"状态下的选项卡主内容都比前面的默认“z-index”值大,而同时必须保证各选项卡的标题在“z-index”的值大。”这样一来我们就能实现所需的Tabs效果。

现在功能实现了,我们还可以使用CSS3transition来给其增加一点动态变化的效果:

			.tabContent {
				opacity: 0;
				filter: alpha(opacity=0); 
				-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; 
				-webkit-transition : opacity 0.5s ease-in 0.218s;
				-moz-transition : opacity 0.5s ease-in 0.218s;
				-o-transition : opacity 0.5s ease-in 0.218s;
				-ms-transition : opacity 0.5s ease-in 0.218s;
				transition : opacity 0.5s ease-in 0.218s;
			}
			#tab1 .tabContent {
				opacity: 1;
				filter: alpha(opacity=100); 
				-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; 
			}
			#tab1:hover .tabContent,
			#tab1:focus .tabContent,
			#tab1:active .tabContent,
			#tab2:hover .tabContent,
			#tab2:focus .tabContent,
			#tab2:active .tabContent,
			#tab3:hover .tabContent,
			#tab3:focus .tabContent,
			#tab3:active .tabContent {            
				opacity: 1;
				filter: alpha(opacity=100);
				-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
			}
		

这样我们就给Tabs添加了一点点动化效果,具体可以参考下面有关于制作Tabs的全部CSS代码

CSS CODE(全部效果代码):

			*{margin: 0;padding:0;}
			body {margin: 0;padding: 20px 50px;}
			/*CSS Tabs style*/
			#cssTabs {
				 position: relative;
				 width: 600px;
				 height: 290px;
				 margin: 0 auto;
			}
			.tabHead {
				 font-weight: normal;
				 padding: 5px;
				 height: 30px;
				 line-height: 30px;
				 text-align: center;
				 border: 1px solid #000;
				 border-width: 1px 1px 0;
				 -moz-border-radius: 5px 5px 0 0;
				 -webkit-border-radius: 5px 5px 0 0;
				 border-radius: 5px 5px 0 0;
				 width: 140px;
				 position: absolute;
				 left: 0;
				 top: 0;
				 background: #fff;
				cursor: pointer;
			}
			.tabContent {
				 padding: 10px 20px;
				 background: #fff;
				 border: 1px solid #000;
				 position: absolute;
				 top: 40px;
				 left: 0;
				 height: 230px;
				 width: 100%;
				 opacity: 0;
				 filter: alpha(opacity=0);
				 -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";  
				 -webkit-transition : opacity 0.5s ease-in 0.218s;
				 -moz-transition : opacity 0.5s ease-in 0.218s;
				 -o-transition : opacity 0.5s ease-in 0.218s;
				 -ms-transition : opacity 0.5s ease-in 0.218s;
				 transition : opacity 0.5s ease-in 0.218s;
			}
			#tab1 .tabHead {
				 z-index: 3;
			}
			#tab2 .tabHead {
				 left: 155px;
				 z-index: 1;
			}
					 
			#tab3 .tabHead {
				 left: 310px;
				 z-index: 1;
			}
				 
			#tab1 .tabContent {
				 z-index: 2;
					opacity: 1;
					filter: alpha(opacity=100);
					-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
			}
					 
			#tab1:hover h3,
			#tab1:focus h3,
			#tab1:active h3,
			#tab2:hover h3,
			#tab2:focus h3,
			#tab2:active h3,
			#tab3:hover h3,
			#tab3:focus h3,
			#tab3:active h3 {
				z-index: 4;
				font-weight: bold;
			}
							
			#tab1:hover .tabContent,
			#tab1:focus .tabContent,
			#tab1:active .tabContent,
			#tab2:hover .tabContent,
			#tab2:focus .tabContent,
			#tab2:active .tabContent,
			#tab3:hover .tabContent,
			#tab3:focus .tabContent,
			#tab3:active .tabContent {            
				 z-index: 3;
				 opacity: 1;
				 filter: alpha(opacity=100);
				 -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
			}
		

上面只使用了几个CSS3的属性,当然你还可以使用更多的CSS3技术,制作出更炫更靓丽的Tabs。

缺点:

使用纯CSS制作Tabs有几个缺点让我们无法忍受:这一切的效果都是在一个固定的宽度和高度的范围内完成的,特别是Tabs选项卡对应的主内容,当其内容超过所设置的高度时无法自适应,就算使用“overfow:auto”也会增有损我们的视觉效果;另上一个就是无法在IE6下正常运行,原因就不说了,在说无语了。

优点:

使用纯CSS制作Tabs有一个最大的优点:使用这种方法制作Tabs无需使用任何jQuery和JavaScript脚本,在不支持脚本的浏览器中也能正常运行。

虽然效果有点呆板,但也不为是一种方法,但具体是否适合运用到项目中,还需考虑,因为我至今为止还没有看到这种方法使用到具体的项目中,所以大家使用时考虑为先。那么到此有关于使用纯CSS制作Tabs就介绍到此。具体效果大点可以点击Demo

如需转载烦请注明出处:W3CPLUS

Jordan Flight Luxe

如需转载,烦请注明出处:https://www.w3cplus.com/css3/pure-css3-create-tabs

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部