当前位置:秋叶网络博客 网络技术 ◊ Js简单实现点击显示隐藏某元素块

Js简单实现点击显示隐藏某元素块

作者:秋叶 发表时间:2014年12月18日

JS在网站制作中充当着非常重要的角色,有的时候我们不需要将网站中的一些内容展示出来,只有当用户需要的时候用鼠标点击之后才会显示出来,而这用js来操作就非常好办了,对于一种效果js有很多方法可以走,但一个简单的功能没必要动大手术,尽量越少越好,追求高效率的网页代码是时代的需求。以下是一段简单实现点击显示隐藏某元素块的js代码:

function click_a(divDisplay){
if(document.getElementById(divDisplay).style.display != "block"){document.getElementById(divDisplay).style.display = "block";}
else{document.getElementById(divDisplay).style.display = "none";}
}

解释:这段js创建的是click_a的动作,divDisplay是默认的元素id,当点击divDisplay时,如果(if)页面中的divDisplay元素(查找:document.getElementById)的样式(style)的display属性不是(!)block的话,就把这个元素的样式display属性改为block(显示),否则(else)的话,也就是元素的display属性为block,那就把它变为none(隐藏起来)。

这样当你点击divDisplay这个元素的时候,会改变它的显隐状态,当再次点击时又会改变显隐状态,这样就达到了显示隐藏循环交替的功能,知道这个原理对于延伸扩展开发就简单了。

当你需要在点击某个id的元素改变另外一个id元素的状态的时候,可以直接在点击的元素里面添加onclick="return click_a('wp_wuover')",wuover为需要改变状态的元素。比如:

<div onclick="return click_a('wp_wuover')"><a>快点击我试试</a></div><br/>
<div id="wp_wuover" style="margin:0 20px 20px; display: none;color:red;"><a href="http://www.mizuiren.com" title="点击他">秋叶被点击了</a></div>

代码运行图标以下是程序代码

提示:可以先修改部分代码再运行

 

目录: 网络技术 | 标签: | 7934次阅读