|
|
邱嵩松注释：
1、下边的JS里有一个i=1,i<=9,这里注意，你有多少切换，这里的9就要改成多少
2、大家注意看哦，列表是有规律的，里边不同的地方就是1～9的数字，大家用[list:i]可以实现修改
3、内容部分要注意一点，第一条是显示的，后边的DIV里都有display:none;，大家按格式来吧！
我先写一个例子，最下边是原始代码，也可以理解为生成后的代码中间的是5U用的代码
====================================
<script language="JavaScript" type="text/javascript">
function ChangeDiv(divId,divName,zDivCount)
{
for(i=1;i<=9;i++)
{
document.getElementById(divName+i).style.display="none";
}
document.getElementById(divName+divId).style.display="block";
}
</script>
<ul>
<!--list:{ $row=9 $cid=3 $order=[order] desc,[id] desc }-->
<li><a onMouseMove="JavaScript:ChangeDiv('[list:i]','qss_',2)" style="cursor:hand;" title="[List:title]">·[List:titlex $len=44 $lenext=...]这里是标题按钮处，这几个字你用的时候删除就好了</a></li>
<!--List-->
</ul>
<!--list:{ $row=9 $cid=3 $order=[order] desc,[id] desc }-->
<div id="qss_[list:i]" {if:[list:i]>1}style="display:none"{end if}>
这儿放内容喽，上边有个IF就是控制第一个不显示display:none，但后8个会显示
</div>
<!--List-->
====================================
<html>
<head>
<title>DIV层切换示例</title>
<script language="JavaScript" type="text/javascript">
function ChangeDiv(divId,divName,zDivCount)
{
for(i=1;i<=9;i++)
{
document.getElementById(divName+i).style.display="none";
}
document.getElementById(divName+divId).style.display="block";
}
</script>
</head>
<body>
<span onMouseMove="JavaScript:ChangeDiv('1','qss_',2)" style="cursor:hand;">标题按钮1</span>
<span onMouseMove="JavaScript:ChangeDiv('2','qss_',2)" style="cursor:hand;">标题按钮2</span>
<span onMouseMove="JavaScript:ChangeDiv('3','qss_',2)" style="cursor:hand;">标题按钮3</span>
<span onMouseMove="JavaScript:ChangeDiv('4','qss_',2)" style="cursor:hand;">标题按钮4</span>
<span onMouseMove="JavaScript:ChangeDiv('5','qss_',2)" style="cursor:hand;">标题按钮5</span>
<span onMouseMove="JavaScript:ChangeDiv('6','qss_',2)" style="cursor:hand;">标题按钮6</span>
<span onMouseMove="JavaScript:ChangeDiv('7','qss_',2)" style="cursor:hand;">标题按钮7</span>
<span onMouseMove="JavaScript:ChangeDiv('8','qss_',2)" style="cursor:hand;">标题按钮8</span>
<span onMouseMove="JavaScript:ChangeDiv('9','qss_',2)" style="cursor:hand;">标题按钮9</span>
<div id="BigDIV" style="border:solid 1px #cccccc;width:460px;margin:10px;">
<div id="qss_1" style="font-size:14px;margin:10px;color:#FF0000;">内容部分第1区</div>
<div id="qss_2" style="display:none;font-size:14px;margin:10px;color:#FF0000;">内容部分第2区</div>
<div id="qss_3" style="display:none;font-size:14px;margin:10px;color:#FF0000;">内容部分第3区</div>
<div id="qss_4" style="display:none;font-size:14px;margin:10px;color:#FF0000;">内容部分第4区</div>
<div id="qss_5" style="display:none;font-size:14px;margin:10px;color:#FF0000;">内容部分第5区</div>
<div id="qss_6" style="display:none;font-size:14px;margin:10px;color:#FF0000;">内容部分第6区</div>
<div id="qss_7" style="display:none;font-size:14px;margin:10px;color:#FF0000;">内容部分第7区</div>
<div id="qss_8" style="display:none;font-size:14px;margin:10px;color:#FF0000;">内容部分第8区</div>
<div id="qss_9" style="display:none;font-size:14px;margin:10px;color:#FF0000;">内容部分第9区</div>
</div>
</body>
</html> |
|
发表于 2019-2-26 10:09:11
收藏