body {
margin:0;
font-size:12px;
background:#666;
}
#box {
width:400px;
height:300px;
margin:100px auto 0;
border:1px dashed cyan;
}
#tab_nav {
margin:0;
padding:0;
height:25px;
line-height:24px;
}
#tab_nav li {
float:left;
margin:0 3px;
list-style:none;
border:1px solid #999;
border-bottom:none;
height:24px;
width:60px;
text-align:center;
background:#FFF;
}
a {
font:bold 14px/24px "微软雅黑",Verdana,Arial,Helvetica,sans-serif;
color:green;
text-decoration:none;
}
a:hover {
color:red;
}
#tab_content {
width:398px;
height:273px;
border:1px solid #999;
font:bold 4em/273px "微软雅黑",Verdana,Arial,Helvetica,sans-serif;
text-align:center;
background:#FFF;
overflow:hidden;
}
#t_1,#t_2,#t_3 {
width:100%;
height:273px;
}
p {
background:red;
float:left;
}
本文档利用HTML+CSS实现tab切换效果,无需任何JS逻辑