javascript tab 选项卡[兼容ie6,ie7,ie8,fox浏览器]

时间：2022-07-02 14:56:47 编辑：袖梨来源：一聚教程网

提示：您可以先修改部分代码再运行

javascript 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/<a href="http://www.111com.net/cssdiv/css.html" target="_blank">css</a>">
		#myTab02  li , #myTab li{
			float:left;
			display:block;
			
			border:1px solid #666666;
		}
	    #ac ,$ac1{
			
			
			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>
		<A href="http://www.111com.net">中国WEB第一站原创，转载注明</A>
</body>
</html>

提示：您可以先修改部分代码再运行

推荐专题

最新下载

热门教程

javascript tab 选项卡[兼容ie6,ie7,ie8,fox浏览器]

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程