纯css实现的tab选项卡代码实例

纯css实现的tab选项卡代码实例:
通常选项卡效果是由javascript实现的，具体可以参阅原生javascript实现的tab选项卡实例代码一章节。
下面分享一个使用纯css实现的tab选项卡功能，代码实例如下:

<!DOCTYPE html>
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>蚂蚁部落</title> 
<style type="text/css">
body{
  margin:0; 
  font-size:12px; 
  background:#666;
}
#box{
  width:400px; 
  height:300px; 
  margin:100px auto 0;
}
#tab_nav{
  margin:0; 
  padding:0; 
  height:25px; 
  line-height:24px;
}
#tab_nav li{
  float:left; 
  margin:0 3px; 
  list-style:none; 
  border:1px solid #999; 
  border-bottom:none; 
  height:24px; 
  width:60px; 
  text-align:center; 
  background:#FFF;
}
a{
  font:bold 14px/24px "微软雅黑", Verdana, Arial, Helvetica, sans-serif; 
  color:green; 
  text-decoration:none;
}
a:hover{color:red;}
#tab_content{
  width:398px; 
  height:273px; 
  border:1px solid #999; 
  font:bold 4em/273px "微软雅黑", Verdana, Arial, Helvetica, sans-serif; 
  text-align:center; 
  background:#FFF; 
  overflow:hidden;
}
#t_1,#t_2,#t_3{
  width:100%; 
  height:273px;
}
</style>
</head>
<body>
<div id="box">
  <ul id="tab_nav">
    <li><a href="#t_1">tab_1</a></li>
   <li><a href="#t_2">tab_2</a></li>
   <li><a href="#t_3">tab_3</a></li>
  </ul>
  <div id="tab_content">
    <div id="t_1">tab_壹</div>
    <div id="t_2">tab_贰</div>
    <div id="t_3">tab_叁</div>
  </div>
</div>
</body>
</html>

这个实现的非常的巧妙，利用的是锚点定位的功能。让父元素隐藏超出的尺寸，只保留当前锚点要显示的区域即可。

关于锚点定位可以参阅html利用锚点实现定位代码实例一章节。

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=18403

更多内容可以参阅:http://www.softwhy.com/divcss/

纯css实现的tab选项卡代码实例

猜你喜欢