5ucms论坛

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 6801|回复: 0

[常用代码] JS切换DIV块

[复制链接]

670

主题

785

帖子

8228

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
8228
发表于 2019-2-26 10:09:11 | 显示全部楼层 |阅读模式
邱嵩松注释:
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>
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|小黑屋|5ucms.com

GMT+8, 2024-3-29 07:02 , Processed in 0.796875 second(s), 30 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表