css3實現tab選項卡程式碼例項

admin發表於2017-02-24
CSSS3
通常選項卡和結合js實現，例如原生javascript 選項卡功能詳解一章節。

下面分享一個單純由css實現的選項卡功能。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
* {
  margin: 0;
  padding: 0;
  list-style: none;
}
body {
  background: #ccc;
}
.main {
  width: 300px;
  height: 150px;
  margin: 50px auto;
  position: relative;
  color: #fff;
}
.main input {
  display: none;
}
.main label {
  cursor: pointer;
  height: 24px;
  display: block;
}
.main li {
  float: left;
  height: 24px;
  line-height: 24px;
  background: #eee;
  margin-right: 3px;
}
.main div {
  width: 300px;
  height: 126px;
  position: absolute;
  top: 24px;
  left: 0;
  background: #999;
  display: none;
}
.main input:checked ~ label {
  background: #999;
}
.main input:checked ~ div {
  display: block;
}
</style>
</head>
<body>
  <div class="main">
    <ul>
      <li>
        <input type="radio" name="tabs" id="tab1" checked>
        <label for="tab1">螞蟻部落一</label>
        <div>softwhy.com</div>
      </li>
      <li>
        <input type="radio" name="tabs" id="tab2">
        <label for="tab2">螞蟻部落二</label>
        <div>antzone</div>
      </li>
    </ul>
  </div>
</body>
</html>

上面的程式碼實現了我們的要求，下面介紹一下它的實現過程。

一.程式碼註釋:

[CSS] 純文字檢視 複製程式碼
* {
  margin: 0;
  padding: 0;
  list-style: none;
}

上面程式碼可以刪除所有元素的內邊距和外邊距。

並且將所有元素的list-style設定為none。

[CSS] 純文字檢視 複製程式碼
body {
  background: #ccc;
}

上面的程式碼可以設定body的背景色為#ccc。

[CSS] 純文字檢視 複製程式碼
.main {
  width: 300px;
  height: 150px;
  margin: 50px auto;
  position: relative;
  color: #fff;
}

選項卡的容器。

設定了它的尺寸，水平居中。

採用相對定位方式。

[CSS] 純文字檢視 複製程式碼
.main input {
  display: none;
}

將main中的input元素隱藏，在本程式碼中是radio單選按鈕。

[CSS] 純文字檢視 複製程式碼
.main label {
  cursor: pointer;
  height: 24px;
  display: block;
}

設定label標籤的樣式，就是利用它和radio單選按鈕關聯起來，實現選項卡效果。

[CSS] 純文字檢視 複製程式碼
.main li {
  float: left;
  height: 24px;
  line-height: 24px;
  background: #eee;
  margin-right: 3px;
}

設定li元素的高度和行高，這樣標題就可以在其中上下居中。

[CSS] 純文字檢視 複製程式碼
.main div {
  width: 300px;
  height: 126px;
  position: absolute;
  top: 24px;
  left: 0;
  background: #999;
  display: none;
}

設定內容元素的樣式。

它是絕對定位，以main元素作為參考物件。

設定top值為24px是為了和標題li不產生重合。

[CSS] 純文字檢視 複製程式碼
.main input:checked ~ label {
  background: #999;
}
.main input:checked ~ div {
  display: block;
}

設定單選按鈕被選中時，label和div元素的樣式。

二.相關閱讀:

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

（2）.label標籤可以參閱HTML的<label>標籤一章節。

相關文章