纯CSS3制作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,这样一来就违背了我们的初衷,所以我们在此放弃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脚本,在不支持脚本的浏览器中也能正常运行。

虽然效果有点呆板,但也不为是一种方法,但具体是否适合运用到项目中,还需考虑,因为我至今为止还没有看到这种方法使用到具体的项目中,所以大家使用时考虑为先。

原文链接:https://www.w3cplus.com/css3/pure-css3-create-tabs

发表评论

登录后才能评论