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逻辑