文章导航PC6首页软件下载单机游戏安卓资源苹果资源

pc软件新闻网络操作系统办公工具编程服务器软件评测

安卓新闻资讯应用教程刷机教程安卓游戏攻略tv资讯深度阅读综合安卓评测

苹果ios资讯苹果手机越狱备份教程美化教程ios软件教程mac教程

单机游戏角色扮演即时战略动作射击棋牌游戏体育竞技模拟经营其它游戏游戏工具

网游cf活动dnf活动lol周免英雄lol礼包

手游最新动态手游评测手游活动新游预告手游问答

您的位置:首页网页设计PHP技巧 → CSS实现Tab技巧

CSS实现Tab技巧

时间:2011/8/11 9:02:15来源:本站原创作者:lff我要评论(0)

  程序员们都知道一般Tab都是靠Javascript来实现的,javascript的好处是功能强大并且灵活。但是也有特殊情况,如果只需一个简单的内容切换我们就可以利用CSS实现Tab。那么CSS实现Tab需要如何操作呢?下面就和小编一起来学习CSS实现Tab技巧吧!
  1. 锚点 + :target;
  2. 纯锚点;
  这两种各有各优点,也有各自的局限性。
  具体的Demo请查看这里
  方案一: 锚点 + :target
  CSS3中引入了一个新的伪类:target,当用户和页面进行某些交互时会触发,例如有以下的代码,当用户点击链接时,便会触发p元素的:target伪类。
  <a href="#dest">Link to Dest</a>
  <p id="dest">This is a new paragraph.</p>
  
  方案一便是利用:target伪类来实现Tab切换。实现原理为:在页面加载的时候通过CSS隐藏Tab相对应的内容,同时在:target伪类中将Tab内容设置为可见。
  HTML结构如下:
  

  <dl>
    <dt class="tab-a first"><a href="#a">Tab A</a></dt>
    <dd id="a" class="content-a">
    Content A
    </dd>
    <dt class="tab-b"><a href="#b">Tab B</a></dt>
    <dd id="b" class="content-b">
    Content B
    </dd>
    <dt class="tab-c"><a href="#c">Tab C</a></dt>
    <dd id="c" class="content-c">
    Content C
    </dd>
    <dt class="tab-d"><a href="#d">Tab D</a></dt>
    <dd id="d" class="content-d">
    Content D
    </dd>
</dl>
使用该结构的一个好处在于缺少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结构如下:
<ul id="tab_nv">
    <li class="tab-a"><a href="#a2">Tab A</a></li>
    <li class="tab-b"><a href="#b2">Tab B</a></li>
    <li class="tab-c"><a href="#c2">Tab C</a></li>
    <li class="tab-d"><a href="#d2">Tab D</a></li>
</ul>
<div id="tab_content">
    <div id="a2" class="content content-a">
    Content A
    </div>
    <div id="b2" class="content content-b">
    Content B
    </div>
    <div id="c2" class="content content-c">
    Content C
    </div>
    <div id="d2" class="content  content-d">
    Content D
    </div>
</div>

  由于和方案一的原理不一样,此处的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会隐藏。

相关视频

    没有数据

相关阅读 listary使用教程 listary的使用技巧iPadOS beta 2下载 iPadOS beta 2固件下载地址iOS 13 beta 2下载 iOS 13 beta 2固件下载地址dnf普雷攻略机制详解 dnf普雷攻略机制BOSS打法全介绍DOTA2自走棋怎么下载 DOTA2自走棋进入方法lol亚索战场boss皮肤多少钱 lol亚索战场boss皮肤特效视频一览lol奇亚娜战场BOSS皮肤特效一览 lol奇亚娜战场BOSS皮肤特效视频macOS 10.15支持哪些设备升级 macOS Catalina可升级设备一览

文章评论
发表评论

热门文章 没有查询到任何记录。

最新文章 如何恢复Discuz!7.0被 CSS实现Tab技巧Linux配置DHCP服务器实例:linux配置教程如何在IIS7下设置支持PHP程序PHP技巧--通过COM使用ADODB

人气排行 dedecms数据库表和字段说明最小化数据传输——在客户端存储数据php如何自动跳转中英文页面如何在IIS7下设置支持PHP程序php批量获取首字母(汉字、数字、英文)经典php实现大文件上传源代码Windows环境PHP的session不能正常使用解决办PHP聊天室技术