欢迎来到ABC模板网,提供海量精品PBootCMS网站模板

当前位置:首页>站长学院>建站知识

点击自动显示/隐藏DIV代码(简单实用)

来源:本站 发布时间:2022-05-29 00:29:55热度:123 ℃

很多时候我们需要将DIV的信息默认为隐藏状态,只有当用户点击时才显示DIV中包含的提示文字。这类效果在互联网上应用得很多,但实现的方法却是五花八门,有的甚至是全页代码,在这里,我提供一个最实用,最好控制且最简单的办法。

代码分析:内容页代码中div默认设置为display:none,即不显示。当鼠标点击控制层时,查找内容页class与控制层中指定的相同名称,如”a1″。js代码将内容页的div中的sytle属性清空,从而实现显示出该div的内容。

JS代码如下:

<script language="javascript">
function div_none(theclass){
var allPageTags = new Array();
var allPageTags = document.getElementsByTagName("div");
for (i=0; i<allPageTags.length;i++){
if(allPageTags[i].className == theclass){
var obj = allPageTags[i];
if(obj.style.display == "none"){
obj.style.display = ""; 
}else{
obj.style.display = "none";
}
}
}
}
</script>


html代码如下:

<div>
   <a name="a1" onClick="div_none('a1');" class="title">如何验证上网?</a>
</div> /*设置点击时触发js事件*/
<div style="display:none;" class="a1"> /*设置本div默认为隐藏*/内容区</div>



转载请注明来源网址:https://www.abcmuban.com/wangzhan/173.html

如果你的问题还没有解决,点击PBootCMS建站交流群加入交流群一起学习交流。支持与鼓励站长,请扫码赞赏一下站长最后那几根倔强的头发。

  • 微信支付

    微信扫一扫

  • 支付宝支付

    支付宝扫一扫

推荐模板
 
QQ在线咨询