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

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>