html實(shí)現(xiàn)tab頁(yè)面切換的方法：首先創(chuàng)建一個(gè)類名為wrap的div當(dāng)作容器；然后創(chuàng)建四個(gè)label標(biāo)簽，在每一個(gè)label中創(chuàng)建一個(gè)span標(biāo)簽；最后創(chuàng)建一個(gè)div作為這個(gè)導(dǎo)航項(xiàng)。

本教程操作環(huán)境：windows7系統(tǒng)、html5版，DELL G3電腦。

html實(shí)現(xiàn)tab頁(yè)面切換的方法：

原理：通過(guò)label標(biāo)簽的關(guān)聯(lián)屬性和input的單選類型實(shí)現(xiàn)相應(yīng)div的顯示

1、創(chuàng)建一個(gè)類名為wrap的div當(dāng)作容器

2、創(chuàng)建四個(gè)label標(biāo)簽，這將作為tab切換項(xiàng)

3、在每一個(gè)label中創(chuàng)建一個(gè)span標(biāo)簽（導(dǎo)航內(nèi)容），input標(biāo)簽（實(shí)現(xiàn)選中于取消選中）type類型為radio，還要?jiǎng)?chuàng)建一個(gè)div作為這個(gè)導(dǎo)航項(xiàng)被點(diǎn)中是顯示內(nèi)容框，

這里要注意的是input標(biāo)簽的name必須是相同的，我這邊取名叫tab

最終HTML為下面這樣：

<div class="wrap">     <label>         <span>home</span>         <input type="radio" name="tab" checked>         <div>home-page</div>     </label>     <label>         <span>list</span>         <input type="radio" name="tab">         <div>list-page</div>     </label>     <label>         <span>news</span>         <input type="radio" name="tab">         <div>news-page</div>     </label>     <label>         <span>mine</span>         <input type="radio" name="tab">         <div>mine-page</div>     </label> </div>

重要的css，通過(guò)將input的width設(shè)為0使得input的那個(gè)小圓點(diǎn)不現(xiàn)實(shí)，又通過(guò)label的關(guān)聯(lián)用導(dǎo)航項(xiàng)的點(diǎn)擊實(shí)現(xiàn)input的checked，然后通過(guò)input:checked+div{display:block}實(shí)現(xiàn)相應(yīng)div的顯示

<style type="text/css">         *{margin: 0;padding: 0;}         .wrap{             margin: 20px auto;             width: 403px;             height: 600px;             border:1px solid brown;             position: relative;         }         label{             width: 100px;             height: 30px;             float: left;             text-align: center;             line-height:30px;             border-right: 1px solid brown;             border-bottom: 1px solid brown;         }         label:nth-of-type(4){             border-right: none;         }         label span{             cursor: pointer;         }         label div{             width: 403px;             height: 568px;             position: absolute;             left: 0;             top: 31px;             background: #eeeeee;             display: none;         }         label input{             width: 0;         }         input:checked+div{             display: block;         }     </style>

相關(guān)學(xué)習(xí)推薦：html視頻教程