css Tab选项卡2
注意上述 红色方框 这个是锚点的变相 以及overflow:hiden结合， 利用 锚点对应 id ， 也可以实现。 兼容ie6+ 适合手机tab 简单 不需要脚本
其实还可以利用 css3：target 实现 ，这里就不多做介绍，原理差不多，都是锚点，兼容ie9+
//以下是源代码 拷贝观察即可
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>css Tab 2</title>
</head>
<body>
<style>
#content{ width:400px; height:400px; position:relative; border:1px solid #666;}
#content ul{ margin:0; padding:0; position:absolute; list-style:none;}
#content ul li{ list-style:none;}
#content ul li a{ display:block; color:#CCC; padding:4px;}
.tabContent{ height:400px; overflow:hidden;}
.tabContent div{width:400px; height:400px;}
#tab1{ background:RED;}
#tab2{ background:green;}
#tab3{ background:blue;}
</style>
<div id="content">
<ul>
<li><a href="#tab1">1</a></li>
<li><a href="#tab2">2</a></li>
<li><a href="#tab3">3</a></li>
</ul>
<div class="tabContent">
<div id="tab1">111111</div>
<div id="tab2">22222</div>
<div id="tab3">33333333</div>
</div>
</div>
</body>
</html>
本文地址：http://www.cnblogs.com/surfaces/
