純css tab選項卡程式碼例項

admin發表於2018-09-11
CSS

通常情況下，選項卡效果需要配合js才能夠實現，具體可以參閱javascript tab選項卡效果詳解一章節。

其實通過純css也是能夠實現的，下面就分享一段這樣的程式碼，並給出詳細的介紹。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
*{
  margin:0;
  padding:0;
  border:0;
  font-size:100%;
  vertical-align:baseline
}
ol,ul{
  list-style:none
}
.container {
  position: relative;
  width: 400px;
  margin: 50px auto;
}
 
.nav {
  position: relative;
  overflow: hidden;
}
 
li {
  width: 200px;
  float: left;
  text-align: center;
  background: #ddd;
}
 
li a {
  display: block;
  width: 200px;
  line-height: 36px;
  font-size: 18px;
  cursor: pointer;
  text-decoration: none;
  color: #000;
}
 
#content1,
#content2 {
  position: absolute;
  overflow: hidden;
  top: 36px;
  width: 400px;
  height: 100px;
  border: 1px solid #999;
  box-sizing: border-box;
  padding: 10px;
  background-color:white;
}
 
#content2 {
  display: none;
  width: 100%;
}
#content1:target,
#content2:target {
  display: block;
}
.a {
  display:block;
}
#content1:target ~ .nav li {
  background: #ddd;
  color: #000;
}
#content1:target ~ .nav li:first-child {
  background: #ff7300;
  color: #fff;
}
 
#content2:target ~ .nav li {
  background: #ddd;
  color: #000;
}
#content2:target ~ .nav li:last-child {
  background: #ff7300;
  color: #fff;
}
.b {
  background: #ff7300;
}
</style>
</head>
<body>
<div class="container">
  <div id="content1" class="a">螞蟻部落一內容</div>
  <div id="content2">螞蟻部落二內容</div>
  <ul class='nav'>
    <li class="b"><a href="#content1">螞蟻部落一</a></li>
    <li><a href="#content2">螞蟻部落二</a></li>
  </ul>
</div>
</body>
</html>

上面的選項卡是由純CSS實現，下面就介紹一下它的實現過程。

一.程式碼註釋:

程式碼的關鍵問題是如何實現感應點選事件，使用:target選擇器來實現此功能，此選擇器選取當前活動的目標元素（這個目標元素起始就是錨點定位的目標元素），程式碼如下:

[HTML] 純文字檢視 複製程式碼
<li class="b"><a href="#content1">螞蟻部落一</a></li>

點選上面的連結，通過錨點定位是指向id屬性值為content1的元素，那麼通過下面css程式碼:

[CSS] 純文字檢視 複製程式碼
#content1:target ~ .nav li {
  background: #ddd;
  color: #000;
}

就可以匹配到id屬性值為content1的元素，進而設定兄弟元素中class屬性值為"nav"的元素下的li元素的樣式，這裡就是選項卡的樣式。

核心元素就是上面這些，更多的細節可以參閱相關閱讀。

二.相關閱讀:

（1）.:target選擇器可以參閱CSS :target一章節。

（2）.~選擇器可以參閱CSS (E~F)一章節。

（3）.:first-child可以參閱CSS E:first-child一章節。

（4）.:last-child可以參閱CSS E:last-child一章節。

相關文章