搜索中...
2015/08/21

【CSS】純CSS製作自適應Tab

tab、頁籤是常見的節省並美觀空間的小工具之一,如今css3的多樣化已經能夠做到擁有各種動畫特效的tabs使用,但也因此,過於低下的瀏覽器版本是不支援的;以下就提供一種較為簡單的純css tabs與效果。
範例展示


ONE、我是第一個頁籤的內容

TWO、我是第二個頁籤的內容

THREE、我是第三個頁籤的內容


程式碼
CSS.尋找並貼在 </b:skin> 之上 、或者使用自訂的新增CSS
*:before, *:after {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}

.top {
 padding-right: 20px;
 background: #261F41;
 text-align: right;
 }

p1 {
 margin: 0 0 20px;
 line-height: 1.5;
}

.tabbox {
 margin: 0 auto;
 min-width: 320px;
 max-width: 800px;
 text-align: center;
}

.content > div {
 display: none;
 padding: 20px 25px 5px;
}

input {
 display: none;
}

.tp {
 display: inline-block;
 padding: 5px 10px;
 font-weight: 600;
 text-align: center;
 font-family: Meiryo
}

.tp:hover {
 color: #fff;
 cursor: pointer;
}

input:checked + .tp {
 background: #FFA500;
 color: #fff;
}

#tab1:checked ~ .content #content1,
#tab2:checked ~ .content #content2,
#tab3:checked ~ .content #content3,
#tab4:checked ~ .content #content4,
#tab5:checked ~ .content #content5 {
 display: block;
 text-align: left;
}

@media screen and (max-width: 400px) { label {padding: 15px 10px;} }
html.文章開啟HTML模式貼上編輯:
<div class="tabbox">
<input checked="" id="tab1" name="tabs" type="radio" />
<label class="tp" for="tab1">頁籤一</label>
 
<input id="tab2" name="tabs" type="radio" />
<label class="tp" for="tab2">頁籤二</label>

<input id="tab3" name="tabs" type="radio" />
<label class="tp" for="tab3">頁籤三</label>
<br />
<div class="content" style="background-color: white;">
<div id="content1">
<p1>ONE、我是第一個頁籤的內容</p1>
</div>
<div id="content2">
<p1>TWO、我是第二個頁籤的內容</p1>
</div>
<div id="content3">
<p1>THREE、我是第三個頁籤的內容</p1>
</div>
</div>
</div>
附加效果
除了運用在文章上外,也可以調用到小工具或者任何你想添加tabs的地方。
此款tab支持RWD(自適應),不過自由度不大
參考來源
http://stanhub.com/

0 意見:

張貼留言