2011年5月18日星期三

Javascript控制DIV层(图片)显示or隐藏

发帖者 Sparkhandle 时间: 14:10
本来想加入像Ickealの秘意心境 X Cyberlog of ACG那样的图片开关(很好玩的样子~),不过没有成功,最后找了一个可以控制DIV层显示/隐藏的JavaScript

HTML code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>示例</title>
<script language="JavaScript" type="text/JavaScript">
function toggle(ID){
        var MyDIV=document.getElementById(ID);
            if (MyDIV.style.display=="none"){
                MyDIV.style.display="block";
            } else {
                MyDIV.style.display="none";
            }
    }
</SCRIPT>
</head>

<body>
<input type="button"  value="显示/隐藏" onclick="toggle('div1')" />
<div id="div1">能看到我吗?</div>
</body>
</html>

使用很简单——可以把javascript代码加入模板中就不用在每篇blog中添加,也可以在需要用到DIV层显示/隐藏功能的blog中加入。<script…………</script>是必须有的,<input type="button" value="显示/隐藏" onclick="toggle('div1')" />是个按钮,可以修改DIV的id,大概是这样~

Related Posts with Thumbnails

0 评论:

发表评论