最近在做一个PHP的MVC,需要用一个横向tab效果,然后就写了个,希望有人用得着…
Tab效果实现的方法很多,每个人都可能会有自己的实现方式,既然是万国牌,再写写我的方法也无妨,相信这种做法的人也会很多。
这种tab分为左右两块,左边是tab,右边是内容,由于选中的tab把右边框架的边框盖住了,所以会给人一种整体的效果。
已测试浏览器:IE6,IE8,ff,chrome,opera.
CSS:
#Tab{margin:3px; min-width:150px;} #Tab .tab{width:121px; border:#cccccc solid 1px; border-right:none; border-bottom:none; position:absolute;} #Tab .tab ul{margin:0; padding:0;} #Tab .tab li{line-height:31px; width:110px; border-bottom:#CCCCCC solid 1px; padding-left:10px; background:url(images/tabbg.jpg) repeat-x;} #Tab .tab li a{color:#696969; font-weight:bold; text-decoration:none;} #Tab .tab li a:hover{color:#DA1007;} #Tab .tab li.focus{background:white; width:111px;} #Tab .tab li.focus a{color:#DA1007;} #Tab .tcont{padding-left:121px;} #Tab .tcont .cont{border:#CCCCCC solid 1px; height:200px;}
HTML:
<div id="Tab"> <div class="tab"> <ul> <li><a href="">menu1</a></li> <li class="focus"><a href="">menu2</a></li> <li><a href="">menu3</a></li> </ul> </div> <div class="tcont"> <div class="cont"> </div> </div> </div>