11.28 点击显示隐藏

10 篇文章 0 订阅
  1. 首先创建一个新的html,在body下面写入两个button按钮用于点击显示隐藏
    在这里插入图片描述
  2. 然后在这个两个button按钮中写入id标签
    在这里插入图片描述
  3. 然后在第二个button按钮下方再添加一个div,id标签也一样要命名,这个div作用是两个按钮点击时显示这个div或者是隐藏这个div的
    在这里插入图片描述
  4. 这时候我们的源代码已经写完了,这时候我们写css样式,在头部title下方写入style样式标签,在标签内写入div所用的样式或者按钮样式,按钮样式我在这里就不写了,自己需要写什么样式的都可以,我这里写的div样式只写了宽高还有背景颜色,这里基本上效果也快出来了
    在这里插入图片描述
  5. 然后我们在body下方添加一个script的标签用来写js代码,在代码内先声明一个变量,在变量里写自己要写入的条件,这里的话需要先命名一个函数,在这个函数内获取到button的按钮id
    在这里插入图片描述
  6. 再这里我们获取到了id标签之后呢,再下方写入你刚刚命名的函数名称在后面写入style的样式display,因为我这里第一个写的是隐藏,所以我这里第一个display也是写none,写完第一个的话我们就可以写第二个,第二个的话也一样,直接复制一下,改一下命名名称还有display的属性就可以了
    在这里插入图片描述
  7. 这里的话我们的js代码也基本完成了,a1代表的是你div的名称,js不仅仅可以改css代码,还可以改样式
  8. 之后我们来看看效果:
    在这里插入图片描述
  9. 只要我们点击了隐藏之后呢,我们的js也会把源代码中的命名为a1的div标签给隐藏掉
    在这里插入图片描述
  10. 接下来是我们源代码:
    在这里插入图片描述
    这是我所学到的点击隐藏显示效果了,所以我要分享给你们,希望可以帮助到你们。
    以上就是我的分享,新手上道,请多多指教。如果有更好的方法或不懂得地方欢迎在评论区教导和提问喔!
  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值