隐藏代码刷新也隐藏div标签代码 点击自动显示/隐藏DIV代码

  • 前端开发
  • 2021-08-20 15:01
  • 157429

很多时候我们需要将DIV的信息默认为隐藏状态,只有当用户点击时才显示DIV中包含的提示文字。这类效果在互联网上应用得很多,但实现的方法却是五花八门,有的甚至是全页代码,喜欢简洁明了的我肯定受不了。我的宗旨是“Write less,Do more!”

故,在这里,我提供一个最实用,最好控制且最简单的办法。

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


如果只隐藏刷新时隐藏掉隐藏代码,可以直接在 div 或者 li 标签里添加如下代码 style="display:none;"

<div style="display:none;">


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>


内容页代码,下面我已进行注释说明:

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


实现效果如下:

001.jpg

评论 0
推荐阅读
  • Fiddler抓取不了PC端微信小程序的包解决方法
  • Fiddler抓取不了PC端微信小程序的包解决方法
  • 最近微信版本更新了3.7.6以上则使用Fiddler抓取不了PC端微信小程序的包。需要进行版本回退才可使用例如微信3.6.0版本。历史的微信版本分享地址如下:阿里云盘:https://www.aliyundrive.com/s/fdXrJzQsivQ百度网盘:链接:https://pan.baidu.com/s/1g2bNf-5kQqCrvecqV71gUQ提取码:ryrh希望可以帮到大家。
  • 技术教程
  • 来源:猎伞
  • 编辑:秀爪
  • 时间:2022-12-12 20:01
  • 阅读:20217
  • php为任意页面设置访问密码 可用作邀请码,注册码,加密网页隐私页面使用
  • php为任意页面设置访问密码 可用作邀请码,注册码,加密网页隐私页面使用
  • 为你的页面支持加密访问无论什么程序只要是PHP程序都是支持这代码的,来实现加密访问你的加密页面或文章等等的页面,不保证其他程序可以正常使用麻烦先测试!密码正确才能进去页面,进入后会存下cookies值,下一次登录的时候则不需要再次输入了;如果不想给人看了,只需要更改密码,cookies就会立即失效,必须要重新登陆才能看。(或者将cookie值3600000改成1,cookies也会立即失效)安装方法:新建PHP文件,命名为:MkE
  • 前端开发
  • 来源:猎伞
  • 编辑:秀爪
  • 时间:2022-10-17 18:57
  • 阅读:66959
  • html是什么意思?
  • html是什么意思?
  • HTML是超文本标记语言,是标准通用标记语言下的一个应用;而超文本标记语言的结构包括“头”部分和“主体”部分,其中“头”部提供关于网页的信息,“主体”部分提供网页的具体内容。如何快速入门VUE3.0:进入学习本文操作环境:Windows7系统、HTML5版,DELLG3电脑HTML是超文本标记语言(HyperTextMarkupLanguage),标准通用标记语言下的一个应用。HTML不是一种编程语言,而是一种标记语言(ma
  • 游戏助手
  • 来源:猎伞
  • 编辑:秀爪
  • 时间:2022-08-22 20:39
  • 阅读:56777
  • 【已解决】无法连接宝塔云端服务器,请刷新页面重试-3
  • 【已解决】无法连接宝塔云端服务器,请刷新页面重试-3
  • 秀爪今天在登录一台安装宝塔面板的云服务器准备添加新站点的时候发现宝塔后台访问很慢,点击菜单无法加载。理应这个问题不是服务器的问题,而是在获取宝塔云端服务器的时候连接不畅通导致的。有群里网友说点击后台右上角的修复可以解决,但是点击后也是这样子无法打开,而且点击菜单也是报错。这里应该是hosts的问题,需要修改Hosts服务端。这里也有找到宝塔官方的解决方案,这里常见在上海和香港服务器有这样的问题。1、上海服务器#优先选择这条命令执行s
  • 运维
  • 来源:猎伞
  • 编辑:秀爪
  • 时间:2022-06-05 17:22
  • 阅读:37283
  • 猎伞底部波浪
  • 猎伞底部波浪
  • 猎伞底部波浪
  • 猎伞底部波浪

我的

消息

足迹



客服

猎伞官方客服

客服QQ:104****84 (点击直接对话)

客服电话:400****16(查看完整电话)

客服邮箱:admin@liesan.com

管理仅处理交易投诉、举报、帐号、资金等平台使用问题;
商品问题请咨询各商品详情页面中显示的商家客服QQ。

正常模式精简模式

返回顶部

浏览记录

最多记录100条,当前共0
1 / 1

购物车
1 / 0

0 选中0件,合计 0
结算

站内消息

当前共0条消息
1 / 0