脚本宝典收集整理的这篇文章主要介绍了html5教程-HTML5之纯CSS3实现的tab标签切换，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

 *{padding:0px;margin:0px;}  #tab{margin:20px;20px;position:relative;}  ul{list-style:none;}  ul li{float:left;}  ul li a{background:#f90;  color:#fff;  font-weight:500;  height:30px;  line-height:30px;  border-bottom:0px;  display:block;  text-decoration:none;  padding:0px 10px;  margin-right:1px;  }  ul li a:hover{background:blue;}  #p1{clear:left;}  #tab>p{  border:1px solid blue;  width:170px;  height:100px;  text-indent:2em;  padding:5px 5px;  position:absolute;  top:31px;  background:#fff;  }  #p1:target,#p2:target,#p3:target{z-index:2;} 

 <p id=tab>     <ul>         <li><a href="#p1">标签1</a></li>         <li><a href="#p2">标签2</a></li>         <li><a href="#p3">标签3</a></li>     </ul>         <p id=p1>欢迎来到北京，这是标签1的内容，这里是清华大学信息处理技术国家实验室（筹）</p>         <p id=p2>欢迎来到杭州，这是标签2的内容，这里是浙江大学计算机图形学国家重点实验室</p>         <p id=p3>欢迎来到武汉，这是标签3的内容，这里是华中科技大学脉冲强磁场国家重大科技基础设施</p> </p>

HTML5的运用之纯CSS3实现的tab标签切换

CSS3代码实现的tab标签切换

 *{padding:0px;margin:0px;}  #tab{margin:20px;20px;position:relative;}  ul{list-style:none;}  ul li{float:left;}  ul li a{background:#f90;  color:#fff;  font-weight:500;  height:30px;  line-height:30px;  border-bottom:0px;  display:block;  text-decoration:none;  padding:0px 10px;  margin-right:1px;  }  ul li a:hover{background:blue;}  #p1{clear:left;}  #tab>p{  border:1px solid blue;  width:170px;  height:100px;  text-indent:2em;  padding:5px 5px;  position:absolute;  top:31px;  background:#fff;  }  #p1:target,#p2:target,#p3:target{z-index:2;} 

 <p id=tab>     <ul>         <li><a href="#p1">标签1</a></li>         <li><a href="#p2">标签2</a></li>         <li><a href="#p3">标签3</a></li>     </ul>         <p id=p1>欢迎来到北京，这是标签1的内容，这里是清华大学信息处理技术国家实验室（筹）</p>         <p id=p2>欢迎来到杭州，这是标签2的内容，这里是浙江大学计算机图形学国家重点实验室</p>         <p id=p3>欢迎来到武汉，这是标签3的内容，这里是华中科技大学脉冲强磁场国家重大科技基础设施</p> </p>

觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ html5教程，巧夺天工，精雕玉琢。小宝典献丑了！

脚本宝典总结

以上是脚本宝典为你收集整理的html5教程-HTML5之纯CSS3实现的tab标签切换全部内容，希望文章能够帮你解决html5教程-HTML5之纯CSS3实现的tab标签切换所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。