木子屋
 

标题: 一次精简JS代码过程

作者: dnawo

日期: 2008-04-10 02:50 PM

分类: 脚本语言

内容: 实现功能：页面上用三个按钮分别控制三个div的显示/隐藏。
思路一：分别写三个函数来实现。
HTML代码
function ShowDivA()
{
document.getElementById("DivA").style.display = "block";
document.getElementById("DivB").style.display = "none";
document.getElementById("DivC").style.display = "none";
}
function ShowDivB()
{
document.getElementById("DivA").style.display = "none";
document.getElementById("DivB").style.display = "block";
document.getElementById("DivC").style.display = "none";
}
function ShowDivC()
{
document.getElementById("DivA").style.display = "none";
document.getElementById("DivB").style.display = "none";
document.getElementById("DivC").style.display = "block";
}
DivA
DivB
DivC

[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
思路二：整合成一个函数来实现。
HTML代码
function ShowDiv(str)
{
if(str=="DivA")
{
document.getElementById("DivA").style.display = "block";
document.getElementById("DivB").style.display = "none";
document.getElementById("DivC").style.display = "none";
}
else if(str=="DivB")
{
document.getElementById("DivA").style.display = "none";
document.getElementById("DivB").style.display = "block";
document.getElementById("DivC").style.display = "none";
}
else if(str=="DivC")
{
document.getElementById("DivA").style.display = "none";
document.getElementById("DivB").style.display = "none";
document.getElementById("DivC").style.display = "block";
}
}
DivA
DivB
DivC

[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
思路三：再精简。
HTML代码
function ShowDiv(obj)
{
document.getElementById("DivA").style.display = "none";
document.getElementById("DivB").style.display = "none";
document.getElementById("DivC").style.display = "none";
obj.style.display = "block";
}
DivA
DivB
DivC

[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

+ 查看当前日志评论 (2)

 

登录

────────────

木子屋

PJBlog3 v3.2.9.518 Inside.

Processed In 0.049 ms

标题: 一次精简JS代码过程

你没有权限发表评论

────────────

木子屋

PJBlog3 v3.2.9.518 Inside.

Processed In 0.049 ms

标题: 一次精简JS代码过程

评论内容:

== dnawo 2008-06-10 08:47 PM ----

能实现功能就好

== xuguofei 2008-06-10 05:48 PM ----

好像还可以写成这样：（呵呵～别笑哦～）
<script language="javascript">
function ShowDiv(obj)
{
    document.getElementById("DivABC").innerHTML = obj.innerHTML;
}
</script>
然后加多一个这样的层<div id="DivABC"></div>

────────────

木子屋

PJBlog3 v3.2.9.518 Inside.

Processed In 0.049 ms