纯css实现的tab选项卡代码实例:
通常选项卡效果是由javascript实现的,具体可以参阅原生javascript实现的tab选项卡实例代码一章节。
下面分享一个使用纯css实现的tab选项卡功能,代码实例如下:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁部落</title> <style type="text/css"> body{ margin:0; font-size:12px; background:#666; } #box{ width:400px; height:300px; margin:100px auto 0; } #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; } </style> </head> <body> <div id="box"> <ul id="tab_nav"> <li><a href="#t_1">tab_1</a></li> <li><a href="#t_2">tab_2</a></li> <li><a href="#t_3">tab_3</a></li> </ul> <div id="tab_content"> <div id="t_1">tab_壹</div> <div id="t_2">tab_贰</div> <div id="t_3">tab_叁</div> </div> </div> </body> </html>
这个实现的非常的巧妙,利用的是锚点定位的功能。让父元素隐藏超出的尺寸,只保留当前锚点要显示的区域即可。
关于锚点定位可以参阅html利用锚点实现定位代码实例一章节。
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=18403
更多内容可以参阅:http://www.softwhy.com/divcss/