关于层与层之间的切换问题求助，DIV+JS
<script language= "JavaScript " type= "text/javascript ">
// <![CDATA[
function ChangeClass(sId)
{
document.getElementById( "TdOne ").style.display= "none ";
document.getElementById( "TdTwo ").style.display= "none ";
document.getElementById( "TdThree ").style.display= "none ";
document.getElementById(sId).style.display= "block ";
}
//]]>
</script>
########## body 部分 #############
<a href= "# " onclick= "ChangeClass( 'TdOne '); return false; "> TdOne内容部分 </a>
<a href= "# " onclick= "ChangeClass( 'TdTwo '); return false; "> TdTwo内容部分 </a>
<a href= "# " onclick= "ChangeClass( 'TdThree '); return false; "> TdThree 内容部分 </a>
<div id= "TdOne " style= "display:none "> TdOne内容部分 </div>
<div id= "TdTwo " style= "display:none "> TdTwo内容部分 </div>
<div id= "TdThree " style= "display:none "> TdThree 内容部分 </div>
请求助的问题就是：把以上各层用不同或一种比较好的的变换效果进行自动切换，不用再点击，层的数量可以任意增减，也要firefox浏览器支持。
[解决办法]
楼主是意思是要扩展性良好~~~
<html>
<script>
function ShowMyDiv(link){
var div = document.getElementById(link.div);
if(window.ShowingDiv)window.ShowingDiv.style.display= "none ";
div.style.display= "block ";
window.ShowingDiv=div;
}
</script>
<body>
<a href= "# " onclick= "ShowMyDiv(this);return false; " div= "TdOne "> TdOne内容部分 </a>
<a href= "# " onclick= "ShowMyDiv(this);return false; " div= "TdTwo "> TdTwo内容部分 </a>
<a href= "# " onclick= "ShowMyDiv(this);return false; " div= "TdThree "> TdThree 内容部分 </a>
<div id= "TdOne " style= "display:block "> TdOne内容部分 </div>
<div id= "TdTwo " style= "display:none "> TdTwo内容部分 </div>
<div id= "TdThree " style= "display:none "> TdThree 内容部分 </div>
</body>
</html>
[解决办法]
LZ可以试一下这个，因为是我自己写的所以应用时可能还需要优化。
在这个例子里增加层时不用添事件，只需要增加相应的DIV和SPAN即可，但FUN，TAR的属性是是一定要正确配置的FUN是元素类型，TAR是目标层ID
<html>
<head>
<meta name= "vs_targetSchema " content= "http://schemas.microsoft.com/intellisense/ie5 ">
<style>
div
{
float:none;
border:solid 1px darkgray;
}
span.on
{
font-size:23px;
color:black;
font-weight:bold;
border:solid 2px darkgray;
background-color:darkgray;
}
span.off
{
font-size:20px;
color:darkgray;
cursor:pointer;
background-color:lightgrey;
border:solid 1px darkgray;
vertical-align:bottom;
}
</style>
</head>
<script language= "javascript ">
<!--
function initTabGroups()
{
var tabs = getGroup( "span ", "fun ", "tab ");
var blocks = getGroup( "div ", "fun ", "block ");
for(var i = 0;i < tabs.length;i++)
{
tabs[i].onclick = function(){
setTabInfo(this);
}
}
setTabInfo(document.getElementById( "defaultTab "));
}
function setTabInfo(tab)
{
var tabs = getGroup( "span ", "fun ", "tab ");
for(var i = 0;i < tabs.length;i++)
{
tabs[i].className = "off ";
}
var blocks = getGroup( "div ", "fun ", "block ");
for(var i = 0;i < blocks.length;i++)
{
blocks[i].style.display = "none ";
}
tab.className = "on ";
var tar = tab.getAttribute( "tar ");
if(tar == null || tar == " " || document.getElementById(tar) == null)
return;
document.getElementById(tar).style.display = "block ";
}
function getGroup(tagName,type,value)
{
var tags = document.getElementsByTagName(tagName);
var group = new Array();
var j = 0;
for(var i = 0;i < tags.length;i++)
{
if(tags[i].getAttribute(type) == value)
{
group[j++] = tags[i];
}
}
return group;
}
//-->
</script>
<body onload= "initTabGroups(); " bgColor= "#e7e7e7 ">
<span id= "defaultTab " fun= "tab " tar= "a1 "> 111111111 </span> <span fun= "tab " tar= "a2 "> 22222222222 </span>
<div style= "background-color:darkgray;height:5px; "> <!----> </div>
<div fun= "block " id= "a1 "> 111111111 <br> 111111111111 </div>
<div fun= "block " id= "a2 "> 222222 <br> 2222222222 </div>
</body>
</html>
