Js代码实现网页点击显示隐藏内容|无作为

来给网站添加一个必须要点击某段文字才能显示隐藏内容的功能把，这里我们通过简单的js代码即可实现这个功能，让你的隐藏内容必须点击特意的文字才能够显示出来。

点击显示隐藏内容效果展示

这里我们先来看看展示图片，首先是没有点击的

然后点击了之后就会显示内容了

这里的内容可以是超链接或者是纯文本，大家可以自定义。

动态展示效果

实现原理

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="https://www.wzw7.com/?golink=aHR0cDovL3d3dy5taXp1aXJlbi5jb20="  title="点击前往">无作为-www.wzw7.com</a></div>

网页点击显示隐藏内容代码

将下面的代码添加到网页对应的位置，或者编辑文章的时候切换文本模式编辑即可使用（在文本模式下保存）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
</head>
<body>
<br/><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="https://www.wzw7.com/?golink=aHR0cDovL3d3dy5taXp1aXJlbi5jb20="  title="点击前往">无作为-www.wzw7.com</a></div>
<script>// <![CDATA[
function click_a(divDisplay){ if(document.getElementById(divDisplay).style.display != "block"){document.getElementById(divDisplay).style.display = "block";} else{document.getElementById(divDisplay).style.display = "none";} }
// ]]></script>
</body>
</html>

其中的代码大家可以自己修改，文字链接也可以自己弄成超链接或者是转跳什么的，有头脑的自己去修改吧，超级棒，超级实用的js代码哦。

文章版权归作者所有，未经允许请勿转载。

THE END