html css 滑动门效果,这么简单就实现了CSS滑动菜单(滑动门)

如此简单就实现了CSS滑动门

*{font-size:9pt;}

ul li { list-style: none; }

ul, li { margin: 0; padding: 0;}

.tabs,.tabs_act{float:left;width:103px;border-bottom:1px solid #ccc;border-right:1px solid #ccc;height:25px;text-align:center;line-height:25px;display:block;}

.tabs_act{font-weight:bold;color:#FC7404;border-bottom:1px solid #fff;background-image:url(http://www.mb5u.com/jscss/demoimg/200904/bgOFF4.gif)}

.Sliding_tab{width:513px;border-left:1px solid #ccc;height:27px;}

.Sliding_tab li{float:left;border-top:1px solid #ccc;}

.Sliding_tab li.table_li{border-bottom:1px solid #ccc;border-top:0px;width:305px;height:26px;line-height:26px;}

.tablist { clear:both; width:513px;border:1px solid #ccc;border-top:0px;height:300px;overflow:hidden;}

function g(o){return document.getElementById(o);}

function Hovertab(num,counts,tabname,tabclass){

for (i=1;i<=counts;i++) {

g(tabname+'tab0'+i).className=tabclass+'tabs';

g(tabname+'div0'+i).style.display='none';

}

g(tabname+'tab0'+num).className=tabclass+'tabs_act';

g(tabname+'div0'+num).style.display='block';

}

• CSS
• AJAX

CSS内容

AJAX内容