div+css+js模拟tab

来源：互联网发布：面具手绘淘宝编辑：程序博客网时间：2024/05/22 09:30

div+css+js模拟tab,

我这个版本,理论上可以添加无限个tab,而且,你只要管内容的添加行了,不需要改JS

当然,你得会DIV才行.

js的话,太简单了.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>div+css+js模拟tab</title><mce:style></mce:style><style mce_bogus="1">body{margin:0;padding:0; text-align:center; background-color:#CCCCCC}a{text-decoration:none}#header ul{padding:0;margin:0}#header ul li{list-style:none; float:left}#header ul li span{display:inline-block; border:1px solid #000; cursor:hand;}#ccc{ clear:both; background-color:#009933; text-align:left}#ccc div.cont{display:none}</style></head><body><div id="wrap"> <div id="header"> <ul> <li><a href="#" mce_href="#"><span>框1111</span></a></li> <li><a href="#" mce_href="#"><span>框2222</span></a></li> <li><a href="#" mce_href="#"><span>框3333</span></a></li> <li><a href="#" mce_href="#"><span>框4444</span></a></li> </ul> </div> <div id="ccc"> <div class="cont"> 这里是内容撒．111．．<br /> 这里是内容撒．111．．<br /> 这里是内容撒．111．．<br /> </div> <div class="cont"> 这里是内容撒222．．<br /> 这里是内容撒．222．．<br /> 这里是内容撒．222．．<br /> </div> <div class="cont"> 这里是内容撒．333．．<br /> 这里是内容撒．333．．<br /> 这里是内容撒．333．．<br /> </div> <div class="cont"> 这里是内容撒．444．．<br /> 这里是内容撒．444．．<br /> 这里是内容撒．444．．<br /> </div> </div></div><mce:script type="text/javascript"></mce:script></body></html>