Javascript为blog内容添加可显示/隐藏div2006/06/1311:33 下午
有朋友在Gtalk上问前面帖子上的可点击显示和隐藏的内容是怎么实现的，其实就是用javascript来控制层(DIV)的显示与隐藏，只需要在你的日志内容上添加几句语句而已，虽然很简单，却很实用。因为在写日志的时候，会发现有些内容与主题相关，但是却只是属于注释性的内容，这样你就可以先将这些内容放在一个div里，当你点击某个链接时，修改该DIV的css显示属性即可。
1、从基本开始
源代码:
<a onclick="javascript:document.getElementById('test').style.display=none">点击隐藏ID为test的DIV</a>
<div id="test" style="border: 1px solid rgb(238, 238, 238); padding: 5px;">这是一段测试文字</div>演示效果:
点击隐藏ID为test的DIV
这是一段测试文字
这是一个最基本的例子，因为只可以点击隐藏。注意名为test的DIV的初始显示属性(display)是none，也就是隐藏；而链接<a>里点击(onclick)之后该DIV的显示属性display='',是将DIV的显示设置为默认（显示）
2、加上条件判断来控制显示
如果您有权限编辑您的blog模板，那么可以在head间插入如下的js代码
<script type="text/javascript">
function discontrol(itemid){
if(document.getElementById(itemid).style.display=='none'){
document.getElementById(itemid).style.display="";
}
else{
document.getElementById(itemid).style.display="none";
}
}
</script>代码的意思为，当id为itemid的DIV显示为“隐藏/none”时，重设其显示为“显示”；而当其他状况下，设置其显示为"隐藏/none"
当你新写日志的时候，只需要在代码编辑环境下将要显示或隐藏的DIV设置ID名，然后在控制DIV显示与隐藏的链接上按如下格式书写即可:
<a onclick="divcontrol('DIV的ID')" style="cursor:pointer">链接名称</a> 记得将你的DIV命名ID
指向此文章的链接
<< 主页