标签页切换应该是网页中最常见的功能之一了吧，今天简单的做个记录，希望能帮到一部分初学者
HTML代码：
<code><</code><code>div</code> <code>id</code><code>=</code><code>"header"</code><code>></code>
<code> </code><code><</code><code>ul</code> <code>class</code><code>=</code><code>"clearfix"</code><code>></code>
<code> </code><code><!-- 注意看a标签的href属性和下面三个div的id值 --></code>
<code> </code><code><</code><code>li</code><code>><</code><code>a</code> <code>href</code><code>=</code><code>"#containerOne"</code><code>>标签一</</code><code>a</code><code>></</code><code>li</code><code>></code>
<code> </code><code><</code><code>li</code> <code>class</code><code>=</code><code>"active"</code><code>><</code><code>a</code> <code>href</code><code>=</code><code>"#containerTwo"</code><code>>标签二</</code><code>a</code><code>></</code><code>li</code><code>></code>
<code> </code><code><</code><code>li</code><code>><</code><code>a</code> <code>href</code><code>=</code><code>"#containerThree"</code><code>>标签三</</code><code>a</code><code>></</code><code>li</code><code>></code>
<code> </code><code></</code><code>ul</code><code>></code>
<code></</code><code>div</code><code>></code>
<code><</code><code>div</code> <code>id</code><code>=</code><code>"mainContainer"</code><code>></code>
<code> </code><code><</code><code>div</code> <code>id</code><code>=</code><code>"containerOne"</code><code>></code>
<code> </code><code>第一个标签页<</code><code>br</code><code>></code>
<code> </code><code>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto dolore eos ipsum laborum, minima nesciunt nihil provident qui quis quos. Adipisci cupiditate dolore fuga fugiat molestias nam rem, reprehenderit tenetur.</code>
<code> </code><code></</code><code>div</code><code>></code>
<code> </code><code><</code><code>div</code> <code>id</code><code>=</code><code>"containerTwo"</code> <code>class</code><code>=</code><code>"active"</code><code>></code>
<code> </code><code>第二个标签页<</code><code>br</code><code>></code>
<code> </code><code>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium maiores nemo possimus quas ratione? Aspernatur assumenda aut consequatur, culpa delectus exercitationem fuga laborum numquam provident sapiente, sequi suscipit ut voluptas!</code>
<code> </code><code><</code><code>div</code> <code>id</code><code>=</code><code>"containerThree"</code><code>></code>
<code> </code><code>第三个标签页<</code><code>br</code><code>></code>
<code> </code><code>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab animi, assumenda dolores doloribus eum ex expedita fuga fugiat impedit, laboriosam minus nam repellendus reprehenderit saepe sequi similique, sit sunt voluptatibus.</code>
<code> </code><code>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aperiam eius id, magni maiores odio provident quibusdam rerum tempora ullam? Assumenda deleniti impedit minima officiis perferendis. Accusantium dolorem nemo perferendis.</code>
CSS代码：
<code>/*简单重置下样式*/</code>
<code>*{</code><code>margin</code><code>:</code><code>0</code><code>; </code><code>padding</code><code>:</code><code>0</code><code>;}</code>
<code>ul{</code><code>list-style</code><code>:</code><code>none</code><code>;}</code>
<code>a{</code><code>text-decoration</code><code>: </code><code>none</code><code>; </code><code>color</code><code>:</code><code>#000</code><code>;}</code>
<code>.clearfix{zoom:</code><code>1</code><code>;}</code>
<code>.clearfix:after{</code><code>content</code><code>:</code><code>''</code><code>; </code><code>display</code><code>:</code><code>block</code><code>; </code><code>clear</code><code>:</code><code>both</code><code>;}</code>
<code>/*标签头样式*/</code>
<code>#header{</code><code>background</code><code>:</code><code>#4bb</code><code>;}</code>
<code>#header ul li{</code><code>float</code><code>:</code><code>left</code><code>; </code><code>width</code><code>:</code><code>33.3%</code><code>; </code><code>text-align</code><code>:</code><code>center</code><code>;}</code>
<code>#header ul li a{</code><code>display</code><code>:</code><code>block</code><code>; </code><code>width</code><code>:</code><code>100%</code><code>; </code><code>height</code><code>:</code><code>30px</code><code>; </code><code>line-height</code><code>:</code><code>30px</code><code>; </code><code>font-weight</code><code>:</code><code>bold</code><code>; </code><code>letter-spacing</code><code>:</code><code>1px</code><code>;}</code>
<code>#header ul li.active{</code><code>background</code><code>:</code><code>#ae2</code><code>;}</code>
<code>#header ul li.active a{</code><code>color</code><code>: </code><code>#f00</code><code>;}</code>
<code>/* 默认隐藏 */</code>
<code>#mainContainer>div{</code><code>display</code><code>:</code><code>none</code><code>;}</code>
<code>#mainContainer>div.active{</code><code>display</code><code>:</code><code>block</code><code>;}</code>
JS代码，注意先引入jQuery
<code>$(</code><code>'#header ul li a'</code><code>).click(</code><code>function</code><code>(e){</code>
<code> </code><code>e.preventDefault(); </code><code>//阻止a链接默认跳转</code>
<code> </code><code>//控制标签头</code>
<code> </code><code>$(</code><code>this</code><code>).parent().addClass(</code><code>'active'</code><code>).siblings(</code><code>'.active'</code><code>).removeClass(</code><code>'active'</code><code>);</code>
<code> </code><code>//控制显示对应的div</code>
<code> </code><code>var</code> <code>id = $(</code><code>this</code><code>).attr(</code><code>'href'</code><code>); </code><code>//获取a元素的href属性值</code>
<code> </code><code>$(id).addClass(</code><code>'active'</code><code>).siblings(</code><code>'.active'</code><code>).removeClass(</code><code>'active'</code><code>);</code>
<code>})</code>
查看下切换效果截图：
<a href="http://s3.51cto.com/wyfs02/M02/89/AA/wKioL1gZkQywxhxDAAAWCgX4TLU834.png" target="_blank"></a>
<a href="http://s5.51cto.com/wyfs02/M01/89/AA/wKioL1gZkS-j5VmXAAAk_TkgEK0556.png" target="_blank"></a>
<a href="http://s1.51cto.com/wyfs02/M02/89/AC/wKiom1gZkT-Dt7OJAAAx0C3Gp10248.png" target="_blank"></a>
本文转自 frwupeng517 51CTO博客，原文链接:http://blog.51cto.com/dapengtalk/1868493
![主流浏览器四大综合性能测试[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)