js tab切换卡
来源：互联网 发布：淘宝网页代码怎么上传 编辑：程序博客网 时间：2024/05/16 17:52
--avascript tab 选项卡[兼容ie6,ie7,ie8,fox浏览器]<!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=gb2312" /><title>javascript tab 选项卡[兼容ie6,ie7,ie8,fox浏览器]</title><script type="text/javascript"> function nTabs(thisObj,Num){ if(thisObj.className == "active")return; var tabObj = thisObj.parentNode.id; var tabList = document.getElementById(tabObj).getElementsByTagName("li"); for(i=0; i <tabList.length; i++){ if (i == Num){ thisObj.className = "active"; document.getElementById(tabObj+"_Content"+i).style.display = "block"; }else{ tabList[i].className = "normal"; document.getElementById(tabObj+"_Content"+i).style.display = "none"; } } } </script> <style type="text/css"> #myTab02 li , #myTab li{ float:left; display:block; width:50px; border:1px solid #666666; } #ac ,#ac1{ width:150px; height:50px; clear:both; } body,td,th { font-size: 12px; }</style></head><body> <ul id="myTab02"> <li class="active" onclick="nTabs(this,0);">新房</li> <li class="normal" onclick="nTabs(this,1);">二手房</li> <li class="normal" onclick="nTabs(this,2);">租房</li> <li class="normal" onclick="nTabs(this,3);">租房</li> </ul> <div style="clear:both"></div> <div id="ac"> <div id="myTab02_Content0"> aaaa </div> <div id="myTab02_Content1" style="display:none;"> bbb </div> <div id="myTab02_Content2" style="display:none;"> ccc </div> <div id="myTab02_Content3" style="display:none;"> dddd </div> </div> <div style="clear:both"></div> <ul id="myTab"> <li class="active" onclick="nTabs(this,0);">新房</li> <li class="normal" onclick="nTabs(this,1);">二手房</li> <li class="normal" onclick="nTabs(this,2);">租房</li> <li class="normal" onclick="nTabs(this,3);">租房</li> </ul> <div style="clear:both"></div> <div id="ac1"> <div id="myTab_Content0"> aaaa </div> <div id="myTab_Content1" style="display:none;"> bbb </div> <div id="myTab_Content2" style="display:none;"> ccc </div> <div id="myTab_Content3" style="display:none;"> dddd </div> </div> </body></html>
