純css實現的tab選項卡程式碼例項

admin發表於2017-04-01
原文網址 : https://www.softwhy.com/article-5384-1.html
CSS

通常選項卡效果是由javascript實現的，具體可以參閱原生javascript實現的tab選項卡例項程式碼一章節。

下面分享一個使用純css實現的tab選項卡功能，程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!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>

這個實現的非常的巧妙，利用的是錨點定位的功能。讓父元素隱藏超出的尺寸，只保留當前錨點要顯示的區域即可。

相關文章