首页 / CSS / 纯CSS实现Tab的两种方案_PHP教程

纯CSS实现Tab的两种方案_PHP教程

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了纯CSS实现Tab的两种方案_PHP教程，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2844字，纯文字阅读大概需要5分钟。

内容图文

Tab在当前的Web应用中是非常常见的，最大的好处在于可以充分的利用有限的空间来展示更多的内容。常见的的Tab一般都是通过Javascript来实现，它的好处是灵活和功能强大。但是在某些情况下，如果仅仅需要一个简单的内容切换时是可以考虑使用纯CSS来实现的。本文主要介绍两种纯CSS的实现方案：

　　1. 锚点 + :target;

　　2. 纯锚点;

　　这两种各有各优点，也有各自的局限性。

　　具体的Demo请查看这里

　　方案一: 锚点 + :target

　　CSS3中引入了一个新的伪类:target，当用户和页面进行某些交互时会触发，例如有以下的代码，当用户点击链接时，便会触发p元素的:target伪类。

Link to Dest

This is a new paragraph.

　　方案一便是利用:target伪类来实现Tab切换。实现原理为：在页面加载的时候通过CSS隐藏Tab相对应的内容，同时在:target伪类中将Tab内容设置为可见。

　　HTML结构如下：


Tab A


Content A

Tab B


Content B

Tab C


Content C

Tab D


Content D


使用该结构的一个好处在于缺少CSS时依然可以清晰的阅读内容。
关键的CSS代码如下

dd{
padding: 5px;
/*隐藏Tab的内容*/
display:none;
-moz-border-radius: 5px;
margin-top:20px
}

dd:target{
position: absolute;
/*显示Tab的内容*/
display:block;
}
/*给Tab以及相应的内容设置相同的背景色*/
.tab-a,.content-a{
background: #CCFF00;
}
.tab-b,.content-b{
background: #CCFFFF;
}
.tab-c,.content-c{
background: #FFFF00;
}
.tab-d,.content-d{
background: #FFCCFF;
}

　　使用CSS方案的一个弊端在于不易区分哪个Tab是当前选中的，一个简单的方式是给相应的Tab以及Tab内容设置相同的背景色，这样当Tab内容显示时，能够更清晰的辨别当前Tab。此外，由于是使用了CSS3中的选择符，因此目前只能在Firefox、Safari、IE8等现代浏览器下使用。

　　方案二: 纯锚点

　　方案二的原理很简单，在大多数浏览器下，当点击锚点链接时，锚点对应的内容会自动跳到可视范围以内。根据该原理，将Tab的所有内容放到一个固定高度的容器中，并且设置容器的overflow为hidden，此外每个Tab内容的高度需要与容器保持一致。在该结构下，当点击锚点链接时对应的内容会自动跳转到可视范围以内容，即容器内。

　　具体的HTML结构如下：


  • Tab A

  • Tab B

  • Tab C

  • Tab D




Content A


Content B


Content C


Content D

　　由于和方案一的原理不一样，此处的HTML结构也只能使用Tab和内容分离的结构，使用该结构的一个问题在于当CSS缺失的情况下无法清晰的阅读内容。

　　关键的CSS代码如下：

/*给Tab Content容器设置高度*/
#tab_content{
height: 190px;
overflow: hidden;
}
/*给每个Tab Content定高度，需要与容器保持一致*/
#tab_content .content{
padding: 5px;
-moz-border-radius: 5px;
height: 190px;
overflow: hidden;
}

　　与方案一一样，这里也通过给Tab以及对应内容设置相同背景色来解决选中识别问题。

　　总结

　　1. 纯CSS实现的Tab受限很多，比如方案二中需要给每个Tab Content设置相同的高度。

　　2. 无法有效的标识当前选中的Tab，本文是通过设置相同背景色做区分，在很多情况下不一定适用。

　　3. 两个方案都存在兼容性问题，方案一使用了CSS3的选择符，受限于CSS的实现;而方案二据说在Opera下不灵。

　　4. 方案一中，当点击其他会触发:target的锚点(或发生类似交互)时，Tab Content会隐藏。

www.bkjia.comtruehttp://www.bkjia.com/PHPjc/735089.htmlTechArticleTab在当前的Web应用中是非常常见的，最大的好处在于可以充分的利用有限的空间来展示更多的内容。常见的的Tab一般都是通过Javascript来实现...

内容总结

以上是互联网集市为您收集整理的纯CSS实现Tab的两种方案_PHP教程全部内容，希望文章能够帮你解决纯CSS实现Tab的两种方案_PHP教程所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/180908.html

来源：【匿名】