当前位置: 网站建设 > 网页设计 > 建站经验 >

纯CSS实现Tab的两种方案

时间:2013-03-02 04:09来源:未知 作者:admin 点击:

标签:纯CSS实现Tab的两种方案 各有(1)方案(11)也有(4)长处(1)自(3)Tab(6)实现(100)两种(11)CSS(823)
这两种各有各长处,也有各自的局限性。 1. 锚点 + :target; Tag:CSS tab CSS tab HTML结构如下: 因为和方案一的原理不一样,此处的HTML结构也只能使用Tab跟内容分别的结构,使用该结构的一个问题在于当CSS缺失的情况下无法清晰的阅读内容。 方案一: 锚点 + :target 4. 方案一中,当点击其余会触发:target的锚点(或产生相似交互)时,Tab Content会隐藏。 方案二的原理很简单,在大多数浏览器下,当点击锚点链接时,锚点对应的内容会主动跳到可视范畴以内
纯CSS实现Tab的两种方案》文章地址:http://www.tfxk.com/wangyesheji/jianzhanjingyan/0302345562013.htm

  这两种各有各长处,也有各自的局限性。

  1. 锚点 + :target;

Tag:CSS   tab   CSS   tab  

  HTML结构如下:

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

  方案一: 锚点 + :target

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

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

Tab在当前的Web利用中长短经常见的,最大的好处在于可以充足的应用有限的空间来展现更多的内容。常见的的Tab个别都是通过Javascript来实现,它的好处是机动和功效强盛。然而在某些情况下,假如仅仅需要一个简单的内容切换时是可以斟酌使用纯CSS来实现的。本文重要先容两种纯CSS的实现方案:

  2. 无奈有效的标识当前选中的Tab,本文是通过设置相同背风景做辨别,在许多情形下不必定实用。

  总结

  CSS3中引入了一个新的伪类:target,当用户和页面进行某些交互时会触发,例如有以下的代码,当用户点击链接时,便会触发p元素的:target伪类。
<a href="#dest">Link to Dest</a>
<p id="dest">This is a new paragraph.</p>

  使用CSS方案的一个弊病在于不易分辨哪个Tab是当前选中的,一个简略的方法是给相应的Tab以及Tab内容设置相同的背景色,这样当Tab内容显示时,可能更清晰的分辨当前Tab。此外,因为是使用了CSS3中的抉择符,因而目前只能在Firefox、Safari、IE8等古代阅读器下使用。

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

<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
   ,纯CSS如何实现三列DIV等高布局; </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>
  ,纯CSS圆角框:透明圆角化背景图片;  <dd id="d" class="content-d">
    Content D
    </dd>
</dl>
应用该构造的一个利益在于缺乏CSS时仍然能够清楚的浏览内容。
要害的CSS代码如下

  1. 纯CSS实现的Tab受限良多,比方计划二中须要给每个Tab Content设置雷同的高度。

--> [网站建设之]纯CSS实现Tab的两种方案

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

  方案二: 纯锚点

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,纯CSS圆角框:基本的圆角框,.content-d{
    background: #FFCCFF;
}

  与方案逐一样,这里也通过给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",纯CSS圆角框:圆角化图片;>Tab C</a></li>
    <li class="tab-d">,纯CSS圆角框3-圆角化图片;<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>

  2. 纯锚点;

  症结的CSS代码如下:
/*给Tab Content容器设置高度*/
#tab_content{
    height: 190px;
    overflow: hidden;
}
/*给每个Tab Content定高度,需要与容器坚持一致*/
#tab_content .content{      
    padding: 5px;
    -moz-border-radius: 5px;
    height: 190px;
    overflow: hidden;
}


(责任编辑:网站建设)
纯CSS实现Tab的两种方案相关文章
上一篇:纯CSS如何实现三列DIV等高布局 下一篇:纯CSS实现Tab选项卡的两种方案
回到顶部