css Tab选项卡2
注意上述 红色方框 这个是锚点的变相 利用 id 也可以实现。 兼容ie6+ 适合手机tab 简单 不需要脚本
其实还可以利用 css3：target 实现 ，这里就不多做介绍，原理差不多，都是锚点，兼容ie9+
//以下是源代码 拷贝观察即可
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>css Tab 2</title>
</head>
<body>
<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>
<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>
</body>
</html>
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
