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

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

很多时候我们需要将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
推荐阅读
  • html是什么意思?
  • html是什么意思?
  • HTML是超文本标记语言,是标准通用标记语言下的一个应用;而超文本标记语言的结构包括“头”部分和“主体”部分,其中“头”部提供关于网页的信息,“主体”部分提供网页的具体内容。如何快速入门VUE3.0:进入学习本文操作环境:Windows7系统、HTML5版,DELLG3电脑HTML是超文本标记语言(HyperTextMarkupLanguage),标准通用标记语言下的一个应用。HTML不是一种编程语言,而是一种标记语言(ma
  • 游戏助手
  • 来源:我来源
  • 编辑:我作者
  • 时间:2022-08-22 20:39
  • 阅读:48
  • 【已解决】无法连接宝塔云端服务器,请刷新页面重试-3
  • 【已解决】无法连接宝塔云端服务器,请刷新页面重试-3
  • 秀爪今天在登录一台安装宝塔面板的云服务器准备添加新站点的时候发现宝塔后台访问很慢,点击菜单无法加载。理应这个问题不是服务器的问题,而是在获取宝塔云端服务器的时候连接不畅通导致的。有群里网友说点击后台右上角的修复可以解决,但是点击后也是这样子无法打开,而且点击菜单也是报错。这里应该是hosts的问题,需要修改Hosts服务端。这里也有找到宝塔官方的解决方案,这里常见在上海和香港服务器有这样的问题。1、上海服务器#优先选择这条命令执行s
  • 运维
  • 来源:猎伞
  • 编辑:秀爪
  • 时间:2022-06-05 17:22
  • 阅读:37156
  • youtube视频怎么下载到本地的方法,免费下载油管视频简单高效
  • youtube视频怎么下载到本地的方法,免费下载油管视频简单高效
  • 修改网址下载油管视频的方法是最简单的,这是一种脱胎于在线网站的方法,本质是一样的,但是更加的简洁高效。因为只需要一个浏览器就可以,因此是跨平台的,手机,电脑,平板电脑都适用。使用方法如下:打开YouTube并播放你要下载的视频,注意到上面地址栏的视频网址,在视频链接里面的“youtube”前面直接加上“ss”,然后点击回车键。此时页面就会跳转到一个下载视频的网站,这里你可以选择要下载的分辨率,比如下载720P等,十分简单。最后点击“Do
  • 技术教程
  • 来源:制作站
  • 编辑:油管
  • 时间:2021-12-08 22:26
  • 阅读:16616
  • 国外免费DNS可隐藏ping域名里的服务器真实IP CDN隐藏IP方法
  • 国外免费DNS可隐藏ping域名里的服务器真实IP CDN隐藏IP方法
  • 使用cloudflare加速你的网站隐藏你的网站IP前言cloudflare是一家国外的CDN加速服务商,还是很有名气的。提供免费和付费的加速和网站保护服务。以前推荐过的百度云加速的国外节点就是和cloudflare合作使用的cloudflare的节点。cloudflare提供了不同类型的套餐,即使是免费用户,cloudflare提供的功能也是很全面的。对于访客来自于国外的网站很不错;对于访客来自于国内的网站加速效果有
  • 运维
  • 来源:制作站
  • 编辑:秀爪
  • 时间:2021-09-24 17:31
  • 阅读:62992
  • 猎伞底部波浪
  • 猎伞底部波浪
  • 猎伞底部波浪
  • 猎伞底部波浪

我的

消息

足迹



客服

猎伞官方客服

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

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

客服邮箱:admin@liesan.com

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

正常模式精简模式

返回顶部

浏览记录

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

购物车
1 / 0

0 选中0件,合计 0
结算

站内消息

当前共0条消息
1 / 0