使用radio選項按鈕可以製作tab效果,有幾個標籤頁,就需要對應添加幾個input,同時每個input的name必須設定為一致,使用CSS3的同級元素連結符來改變樣式。而Tab裡面的nav導航都要用label包裹並添加對應的for.
ps:tab不支援IE8及其以下,box 布局IE 6.0-11.0不支援可float浮動替代
<!DOCTYPE HTML><html><head><meta charset="utf-8"><meta name="apple-mobile-web-app-capable" content="yes" /><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" /><title>DEMO3</title><style type="text/css">/* tab頭地區*/.ui-tab input { display: none}/* 內容地區*/.ui-tab .ui-content ul { display: none; min-height: 200px;}/* 頭部地區選中*/#new:checked ~ .ui-nav .new,#hot:checked ~ .ui-nav .hot,#video:checked ~ .ui-nav .video { background: #F4BD00;}/* 內容地區選中*/#new:checked ~ .ui-content .new-list,#hot:checked ~ .ui-content .hot-list,#video:checked ~ .ui-content .video-list { display: block; background: #f6f6f6;}/* tab頭部布局*/.ui-nav ul { display: -webkit-box; display: box; height: 45px; line-height: 45px; background: #fff;}.ui-nav ul > li { -webkit-box-flex: 1; box-flex: 1; text-align: center;}.ui-nav ul > li label { width: 100%; display: block; cursor: pointer;}</style></head><body> <!-- --> <p class="ui-tab"> <input type="radio" name="ui-tab" id="new" checked="checked" /> <input type="radio" name="ui-tab" id="hot" /> <input type="radio" name="ui-tab" id="video" /> <p class="ui-nav"> <ul> <li class="new"><label for="new">最新新聞</label></li> <li class="hot"><label for="hot">社會焦點</label></li> <li class="video"><label for="video">最新視頻</label></li> </ul> </p> <p class="ui-content"> <ul class="new-list"> <li>tab內容新1</li> </ul> <ul class="hot-list"> <li>tab內容新2…</li> </ul> <ul class="video-list"> <li>tab內容新3…</li> </ul> </p> </p> <!-- --></body></html>
效果:
【相關推薦】
1. 免費css線上視頻教程
2. css線上手冊
3. php.cn獨孤九賤(2)-css視頻教程