卡卡網

之前我做內容選項卡(Content Tabs)的時候，會用到一些小圖片來區(qū)隔，那樣雖然能達到理想的效果，但是維護起來卻不太容易，因為需要更改圖片。今天我將介紹用純CSS3實現的內容選項卡(Content Tabs)4個實例，在本教程中，我們將使用單選按鈕以及:checked偽類和同級組合器來實現一些簡單的CSS3內容選項卡，效果很好，非常實用，值得收藏。

純CSS3實現的內容選項卡(Content Tabs)

demo

內容選項卡是Web設計中非常常見且熟悉的元素，通常它們非常有用。

實例一

demodownload

實例二

demodownload

實例三

demodownload

 實例四

demodownload

標記

我們將使用input元素連接具有類內容(class content)的分隔。內容分隔包括所有“標簽頁(tab pages)”。對于每個input元素，我們將有一個label元素。所有標簽的樣式將類似于標簽。

<section class="tabs">
  <input id="tab-1" type="radio" name="radio-set" class="tab-selector-1" checked="checked" />
  <label for="tab-1" class="tab-label-1">關于我們</label>
  <input id="tab-2" type="radio" name="radio-set" class="tab-selector-2" />
  <label for="tab-2" class="tab-label-2">聯系方式</label>
  <input id="tab-3" type="radio" name="radio-set" class="tab-selector-3" />
  <label for="tab-3" class="tab-label-3">廣告服務</label>
  <input id="tab-4" type="radio" name="radio-set" class="tab-selector-4" />
  <label for="tab-4" class="tab-label-4">免責聲明</label>
            
  <div class="clear-shadow"></div>
  <div class="content">
    <div class="content-1">
            <p>Some content</p>
    </div>
    <div class="content-2">
            <p>Some content</p>
    </div>
    <div class="content-3">
            <p>Some content</p>
    </div>
    <div class="content-4">
            <p>Some content</p>
    </div>
  </div>
</section>

每個input元素都有一個值，我們可以通過添加checked的屬性來使input默認為選中狀態(tài)。

CSS

我們需要做的第一件事是定義一些尺寸并通過將input的不透明度設置為0來隱藏它們：

tabs {
  position: relative;
  margin: 40px auto;
  width: 750px;
}

.tabs input {
  position: absolute;
  z-index: 1000;
  width: 120px;
  height: 40px;
  left: 0px;
  top: 0px;
  opacity: 0;
  cursor: pointer;
}
.tabs input#tab-2{
  left: 120px;
}
.tabs input#tab-3{
  left: 240px;
}
.tabs input#tab-4{
  left: 360px;
}

input將覆蓋label，看起來好像我們單擊了標簽(label)，但實際上我們正在單擊輸入(input)，這是一個技巧，也可以在移動瀏覽器中使用。

接下來，通過為標簽(label)定義一些整潔的樣式，使標簽看起來像標簽。請注意，每個標簽都有不同的z-index。盒子陰影將為選項卡增加深度和真實感。

.tabs label {
  background: linear-gradient(top, #5ba4a4 0%,#4e8c8a 100%);
  font-size: 15px;
  line-height: 40px;
  height: 40px;
  position: relative;
  padding: 0 20px;
  float: left;
  display: block;
  width: 80px;
  color: #385c5b;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: bold;
  text-align: center;
  text-shadow: 1px 1px 1px rgba(255,255,255,0.3);
  border-radius: 3px 3px 0 0;
  box-shadow: 2px 0 2px rgba(0,0,0,0.1), -2px 0 2px rgba(0,0,0,0.1);
}

.tabs input:hover + label {
  background: #5ba4a4;
}

.tabs label:first-of-type {
  z-index: 4;
  box-shadow: 2px 0 2px rgba(0,0,0,0.1);
}

.tab-label-2 {
  z-index: 3;
}

.tab-label-3 {
  z-index: 2;
}

.tab-label-4 {
  z-index: 1;
}

由于我們不希望顯示框陰影的底部，因此我們將使用:after偽元素將其覆蓋，其中不包含任何內容：

.tabs label:after {
  content: '';
  background: #fff;
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  display: block;
}

當我們單擊一個選項卡（label）時，它的樣式和顏色將與其他樣式不同，重要的是要確保“已選中(checked)”標簽將位于選項卡中所有其他層的頂部。因此，我們將為其賦予最高的z-index：

.tabs input:checked + label {
  background: #fff;
  z-index: 6;
}

如前所述，內容分區(qū)將包含所有標簽頁，我們將其z-index設置為5，使其在所選標簽下。這樣，內容區(qū)域的盒子陰影將覆蓋所有其他標簽。

在內容區(qū)域內，有四個分區(qū)，每個分區(qū)都有自己的內容。默認情況下（當未選擇/單擊它們各自的標簽時），我們希望它們被隱藏。因此，我們將不透明度設置為零，將z-index設置為1。我們不能使用display:none屬性，因為transitions不支持該屬性。

.content {
  background: #fff;
  position: relative;
  width: 100%;
  height: 370px;
  z-index: 5;
  box-shadow: 0 -2px 3px -2px rgba(0,0,0,0.2), 0 2px 2px rgba(0,0,0,0.1);
  border-radius: 0 3px 3px 3px;
}

.content div {
  position: absolute;
  top: 0;
  left: 0;
  padding: 10px 40px;
  z-index: 1;
  opacity: 0;
  transition: all linear 0.1s;
}

.content div h2,
.content div h3{
  color: #398080;
}
.content div p {
  font-size: 14px;
  line-height: 22px;
  font-style: italic;
  text-align: left;
  margin: 0;
  color: #777;
  padding-left: 15px;
  font-family: Cambria, Georgia, serif;
  border-left: 8px solid rgba(63,148,148, 0.1);
}

當我們希望某個內容出現（單擊標簽）時，我們將不透明度設置為1并提高z-index，因為我們希望該內容劃分位于所有其他內容之上：

.tabs input.tab-selector-1:checked ~ .content .content-1,
.tabs input.tab-selector-2:checked ~ .content .content-2,
.tabs input.tab-selector-3:checked ~ .content .content-3,
.tabs input.tab-selector-4:checked ~ .content .content-4 {
  z-index: 100;
  opacity: 1;
  transition: all ease-out 0.2s 0.1s;
}

在本教程中，介紹了將內容淡入/淡出的基本示例。您可以在演示中找到更多樣式和效果。

標簽: css  css3  內容選項卡  Content-Tabs