今天總結一下頁面中選項卡實現的幾種方法。在實戰中會經常的使用到。下面的方法都是純HTML+CSS,并沒有用到JS,JS日后補上。
一、使用:target屬性實現選項卡
頁面的結構:(html)
<div class="parent"> <a href="#div1">選項卡1</a><a href="#div2">選項卡2</a> <div id="div1"> <p>選項卡1的內容</p> </div> <div id="div2"> <p>選項卡2的內容</p> </div></div>注意:這里要注意內聯元素在元代碼中若有回車,則在頁面中會出現選項卡的標題之間有一個縫隙,所以如上所示,兩個a標簽連著寫。頁面的CSS:
*{ margin:0; padding:0; } body{ padding:20px; } div.parent{ position:relative; } a{ border:1px solid #ccc; padding:10px; line-height:40px; background:#ffa; color:#000; text-decoration:none; position:relative; z-index:3; } div.parent > div{ width:300px; height:200px; border:1px solid #ccc; background:#ffa; position:absolute; top:38px; left:0px; z-index:2; display:none; } div.parent > div:target{ display:block; }此方法的缺點是在不考慮瀏覽器的兼容問題的情況下,它無法控制選中的選項卡相對應的樣式變化。并且地址欄也會出現相對應的div的id/運行的結果:
二、使用:checked屬性實現選項卡
頁面結構:
<ul class="tabs"> <li> <input type="radio" name="tabs" id="tab1" checked/> <label for="tab1">選擇卡1</label> <div class="tab_content" id="tab_content1"> <p>選項卡1的內容</p> </div> </li> <li> <input type="radio" name="tabs" id="tab2"/> <label for="tab2">選擇卡2</label> <div class="tab_content" id="tab_content2"> <p>選項卡2的內容</p> </div> </li> </ul>頁面的CSS:*{ margin:0; padding:0; list-style:none; box-sizing:border-box; } body{ padding:20px; } .tabs{ width:650px; position:relative; background:#aaf; } .tabs li{ float:left; } .tabs input[type=radio]{/*隱藏單選框的樣式*/ position:absolute; top:-9999px; left:-9999px; } .tabs label{ display:block; border:1px solid #000; padding:10px; text-align:center; border-radius:6px 6px 0 0 ; background:#aaf; border-bottom:1px solid transparent; position:relative; top:4px; z-index:3; transition:all 0.2s ease-in-out; } .tabs label:hover{ background:#bbf; } .tabs .tab_content{ width:100%; background:#faf; height:200px; position:absolute; top:43px; left:0px; z-index:2; border:1px solid #000; padding:10px; display:none; } .tabs input[type=radio]:checked + label{ top:0px; padding-top:14px; background:#faf; } .tabs input[type=radio]:checked ~ div[id^=tab_content]{ display:block; }此處注意要把單選框的樣式隱藏起來,不要在頁面中顯示。此方法相對于上面的方法做出了一些改進,使得我們可以控制選中的樣式,但是由于采用了CSS3的屬性,對于不兼容CSS3的瀏覽器來說就不能用了。運行的結果:
新聞熱點
疑難解答