javascript 控制div显示与隐藏
<!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测试</title>
<script type="text/javascript">
function nTabs(tabObj,obj){
var tabList = document.getElementById(tabObj).getElementsByTagName("li");
for(i=0; i <tabList.length; i++)
{
if (tabList[i].id == obj.id)
{
document.getElementById(tabObj+"_Title"+i).className = "active"; <!--激活标题-->
document.getElementById(tabObj+"_Content"+i).style.display = "block";<!--激活内容-->
}else{
document.getElementById(tabObj+"_Title"+i).className = "normal";
document.getElementById(tabObj+"_Content"+i).style.display = "none";
}
}
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>javascript测试</title>
<script type="text/javascript">
function nTabs(tabObj,obj){
var tabList = document.getElementById(tabObj).getElementsByTagName("li");
for(i=0; i <tabList.length; i++)
{
if (tabList[i].id == obj.id)
{
document.getElementById(tabObj+"_Title"+i).className = "active"; <!--激活标题-->
document.getElementById(tabObj+"_Content"+i).style.display = "block";<!--激活内容-->
}else{
document.getElementById(tabObj+"_Title"+i).className = "normal";
document.getElementById(tabObj+"_Content"+i).style.display = "none";
}
}
}
</script>
</head>
<body>
<div class="n4Tab1" id="n4Tab2">
<div class="TabTitle1">
<ul>
<li id="n4Tab2_Title0" onmouseover="nTabs('n4Tab2',this);" class="active"><h6><a href="javascript:void(2);">动态</a></h6></li>
<li id="n4Tab2_Title1" onmouseover="nTabs('n4Tab2',this);" class="normal"><h6><a href="javascript:void(2);">帮助</a></h6></li>
<li id="n4Tab2_Title2" onmouseover="nTabs('n4Tab2',this);" class="normal"><h6><a href="javascript:void(2);">服务</a></h6></li>
<li id="n4Tab2_Title3" onmouseover="nTabs('n4Tab2',this);" class="normal"><h6><a href="javascript:void(2);">汇款方式</a></h6></li>
</ul>
</div>
<div class="TabContent">
<div class="TabContent" id="n4Tab2_Content0"> <!--$最新动态列表$--> 最新动态列表 </div>
<div id="n4Tab2_Content1" class="none"> <!--$帮助列表$--> 帮助列表 </div>
<div id="n4Tab2_Content2" class="none"> <!--$本站服务$--> 本站服务列表 </div>
<div id="n4Tab2_Content3" class="none"> <!--$汇款方式$--> 汇款方式列表 </div>
</div>
</div>
<!--一下为第二部分-->
<div class="n4Tab1" id="n4Tab3">
<div class="TabTitle1">
<ul>
<li id="n4Tab3_Title0" onmouseover="nTabs('n4Tab3',this);" class="active"><h6><a href="javascript:void(2);">动态2</a></h6></li>
<li id="n4Tab3_Title1" onmouseover="nTabs('n4Tab3',this);" class="normal"><h6><a href="javascript:void(2);">帮助2</a></h6></li>
<li id="n4Tab3_Title2" onmouseover="nTabs('n4Tab3',this);" class="normal"><h6><a href="javascript:void(2);">服2务</a></h6></li>
<li id="n4Tab3_Title3" onmouseover="nTabs('n4Tab3',this);" class="normal"><h6><a href="javascript:void(2);">汇款方式2</a></h6></li>
</ul>
</div>
<div class="TabContent">
<div class="TabContent" id="n4Tab3_Content0"> <!--$最新动态列表$--> 最新动态列表2 </div>
<div id="n4Tab3_Content1" class="none"> <!--$帮助列表$--> 帮助列表2 </div>
<div id="n4Tab3_Content2" class="none"> <!--$本站服务$--> 本站服务列表2 </div>
<div id="n4Tab3_Content3" class="none"> <!--$汇款方式$--> 汇款方式列表2 </div>
</div>
</div>
</body>
</html>
<div class="n4Tab1" id="n4Tab2">
<div class="TabTitle1">
<ul>
<li id="n4Tab2_Title0" onmouseover="nTabs('n4Tab2',this);" class="active"><h6><a href="javascript:void(2);">动态</a></h6></li>
<li id="n4Tab2_Title1" onmouseover="nTabs('n4Tab2',this);" class="normal"><h6><a href="javascript:void(2);">帮助</a></h6></li>
<li id="n4Tab2_Title2" onmouseover="nTabs('n4Tab2',this);" class="normal"><h6><a href="javascript:void(2);">服务</a></h6></li>
<li id="n4Tab2_Title3" onmouseover="nTabs('n4Tab2',this);" class="normal"><h6><a href="javascript:void(2);">汇款方式</a></h6></li>
</ul>
</div>
<div class="TabContent">
<div class="TabContent" id="n4Tab2_Content0"> <!--$最新动态列表$--> 最新动态列表 </div>
<div id="n4Tab2_Content1" class="none"> <!--$帮助列表$--> 帮助列表 </div>
<div id="n4Tab2_Content2" class="none"> <!--$本站服务$--> 本站服务列表 </div>
<div id="n4Tab2_Content3" class="none"> <!--$汇款方式$--> 汇款方式列表 </div>
</div>
</div>
<!--一下为第二部分-->
<div class="n4Tab1" id="n4Tab3">
<div class="TabTitle1">
<ul>
<li id="n4Tab3_Title0" onmouseover="nTabs('n4Tab3',this);" class="active"><h6><a href="javascript:void(2);">动态2</a></h6></li>
<li id="n4Tab3_Title1" onmouseover="nTabs('n4Tab3',this);" class="normal"><h6><a href="javascript:void(2);">帮助2</a></h6></li>
<li id="n4Tab3_Title2" onmouseover="nTabs('n4Tab3',this);" class="normal"><h6><a href="javascript:void(2);">服2务</a></h6></li>
<li id="n4Tab3_Title3" onmouseover="nTabs('n4Tab3',this);" class="normal"><h6><a href="javascript:void(2);">汇款方式2</a></h6></li>
</ul>
</div>
<div class="TabContent">
<div class="TabContent" id="n4Tab3_Content0"> <!--$最新动态列表$--> 最新动态列表2 </div>
<div id="n4Tab3_Content1" class="none"> <!--$帮助列表$--> 帮助列表2 </div>
<div id="n4Tab3_Content2" class="none"> <!--$本站服务$--> 本站服务列表2 </div>
<div id="n4Tab3_Content3" class="none"> <!--$汇款方式$--> 汇款方式列表2 </div>
</div>
</div>
</body>
</html>
没有评论:
发表评论