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

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

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

原理：通過label標簽的關聯(lián)屬性和input的單選類型實現(xiàn)相應div的顯示

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

2、創(chuàng)建四個label標簽，這將作為tab切換項

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

這里要注意的是input標簽的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，通過將input的width設為0使得input的那個小圓點不現(xiàn)實，又通過label的關聯(lián)用導航項的點擊實現(xiàn)input的checked，然后通過input:checked+div{display:block}實現(xiàn)相應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>

相關學習推薦：html視頻教程