今天遇到一个问题，如果使用div+js实现一个简单的切换效果，就像图片切换那样，在网上找了许多方法，不过找到一个比较简单适用的，下面是网络找了一个方法和自己写了一个，其实两个差不多方式，如下：
<html>
<head>
<title>DIV层切换</title>
<script language="JavaScript" type="text/javascript">
/*********************************************
功能: 通用DIV切换函数
参数: divID --当前DIV的ID号；divName --要改变的这一组DIV的命名前缀；zDivCount --这一组DIV的个数-1
修改 : 郑德才 2012.05
[url]http://www.zhengdecai.com[/url]
*********************************************/
<script language="javascript">
function ChangeDiv(divId, divName, zDivCount) { //这种方法是通过定义一个id为特殊字符串，适用特殊字符串加上数字编号形成一个div的id，每次点击或划过时隐藏所有div，然后再显示当前点击或划过的div
for (i = 1; i <= zDivCount; i++) {
document.getElementById(“divStr”+ i).style.display = "none";
}
document.getElementById(“divStr”+ divId).style.display = "block";
}
function ShowDiv(DivID, DivCount) { //这种方法也是通过定义一个id为特殊字符串，不过适用div的id使用一个相同的字符串（divStr）+数字组成，判断当前点击的数据和i相同则是显示，其他的都隐藏
for (i = 1; i <= DivCount; i++) {
if (i == DivID) {
document.getElementById("divStr" + i).style.display = "block";
} else {
document.getElementById("divStr" + i).style.display = "none";
}
}
}
</script>
</head>
<body>
层切换示例：<br>By:JetKing([url]www.80Boby.Com[/url])<br>
<span onMouseMove="JavaScript:ChangeDiv('1',3)" onclick="JavaScript:ShowDiv('1',3)" style="cursor:hand;">内容一</span>
<span onMouseMove="JavaScript:ChangeDiv('2',3)" onclick="JavaScript:ShowDiv('2',3)" style="cursor:hand;">内容二</span>
<span onMouseMove="JavaScript:ChangeDiv('3',3)" onclick="JavaScript:ShowDiv('3',3)" style="cursor:hand;">内容三</span>
<div id="BigDIV" style="border:solid 1px #cccccc;width:460px;margin:10px;">
<div id="divStr1" style="font-size:14px;margin:20px;color:#FF0000;">内容部分第一区<br><img src="http://www.80boby.com/images/common/watermark.gif"></div>
<div id="divStr2" style="display:none;font-size:14px;margin:10px;color:#FF0000;">内容部分第二区<br><img src="upload/201205102024512851.gif"></div>
<div id="divStr3" style="display:none;font-size:14px;margin:10px;color:#FF0000;">内容部分第三区</div>
</div>
</body>
</html>
发表评论:
◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。