关于层与层之间的切换有关问题，DIV+JS
日期：2014-05-16 浏览次数：20375 次
关于层与层之间的切换问题求助，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 ",
<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 ",
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
