《CSS那些事儿》应用篇

本文是《CSS 那些事儿》阅读笔记第四篇（应用篇）。Tab选项卡各自实现方式.

一、Tab选项卡

1. 方法一

这是早期通过iframe框架标签实现的选项卡模式。

<ul>
<li><a href="#" target="open_url">标签一</a>
<li><a href="#" target="open_url">标签二</a>
<iframe scrolling="no" src="#" frameborder="0" name="open_url"></iframe>
</ul>

2. 方法二

这是主流的Tab选项卡实现模式，采取的是标题float浮动布局，选项卡区position绝对定位布局。

<style type="text/css">
#tab{position:relative;width:100%;}
#tab .up{background:#ccc}
#tab h3{float:left;width:114px;height:26px;background:#eee;margin:0 -1px 0 0;}
#tab div{display:none;position:absolute;top:26px;left:0;width:226px;border:1px solid #d4d3d3;border:0 1px 1px;}
#tab .block{display:block;padding-bottom:10px;}
</style>

<div id="tab">
<h3 class="up" onclick="go_to(1);">标题一</h3>
<h3 onclick="go_to(2);">标题二</h3>
<h3 onclick="go_to(3);">标题三</h3>
<h3 onclick="go_to(4);">标题四</h3>
</div>

<script type="text/javascript">
var h=document.getElementById("tab").getElementsByTagName("h3");
var d=document.getElementById("tab").getElementsByTagName("div");
function go_to(ao){
for(var i=0;i<h.length;i++){
if(ao-1==i){
h[i].className+=" up";
//d[i].className+=" block";
} else {
h[i].className=" ";
//d[i].className=" ";
}
}
}
</script>

3. 方法三

该方法采取的是标题和选项卡区均float浮动布局，缺点是缺乏XHTML语义化。

<div id="tab">
<h3 class="up" onclick="go_to(1);">标题一</h3>
<h3 onclick="go_to(2);">标题二</h3>
<div class="block">文本一</div>
<div>文本二</div>
</div>
CSS基本不变，将内容区（#tab div）绝对定位改为浮动即可。

原文地址 : http://wangyan.org/blog/css-nxs-yy.html
本站遵循 : 知识共享署名-非商业性使用-相同方式共享 3.0 版权协议
版权声明 : 原创文章转载时，请务必以超链接形式标明 文章原始出处