【WEB网站】用js实现元素显示与隐藏

WEB开发讲师-龙施宇 发布于 2018/10/31 22:05
查看:55|回复:1


Javascript是一种轻量级的编程语言,是可以插入html页面的编程代码,可以在所有的现代浏览器中执行,通过学习javascript,我们就可以搭建出逻辑复杂的网页。

用js实现元素显示与隐藏的步骤如下

1.    编写好html结构

新建一个index.html文件,写入如下图所示的html代码。该网页中有一张图片和两个按钮。点击“显示”按钮,图片显示;点击“隐藏”按钮,图片隐藏。

2e69c670b6419e709fd7c10d5b6c876c001.jpg

浏览器预览效果


42e70aa3dda5fd8c70f6255bfdc03d9c001.jpg

a56cb003dcaa6749aa9e0c1fd35b788b001.jpg

2.    编写js代码。给按钮添加点击事件,在相同路径创建一个index.js 文件,写入下方js代码。

5e904a6d9fa9b760d0f149651f152e9f001.jpg

这样,点击按钮就可以控制图片的显示或隐藏了。

 


查看点赞情况
全部点赞
总计: --
WEB开发讲师-龙施宇于 2018-11-01 13:44 重新编辑过该贴

共有1条评论

  • 永远的拼笑 永远的拼笑

    B_28.gif大神好厉害  请收下我的膝盖

    沙发 2018/10/31 22:42 回复
发布新贴
招版主啦

版主

  • 杨_宇 杨_宇
  • WEB前讲师-苏少强 WEB前讲师-苏少强
  • web讲师--何广森 web讲师--何广森
  • web前端讲师-闫华伟 web前端讲师-闫华伟
  • zacharyjoke zacharyjoke
  • Web讲师-李家靖 Web讲师-李家靖

注册有礼

完善以下信息,为你推荐课程

  • 学生
  • 白领
  • 高管
  • 自由职业
  • 其他
  • 工作需要
  • 自我提升
  • 兴趣爱好
  • 创业/转型
  • 其他
  • 小白
  • 了解
  • 熟悉
  • 精通
  • 其他
  • 高中/中专
  • 专科
  • 本科
  • 硕士
  • 其他
  • 影视枪战大片特效解析
  • 五步揭晓平面广告的奥秘
  • PS视觉惊悚课堂
  • 揭秘平均月薪过万的UI设计行业
  • 45天7千平方大厦变形记
  • 原画学习痛点技法全解析
  • 影视动画奇幻课堂
  • AI高端商业设计全攻略
  • UG职场生存必备指南
  • 日赚千元之新媒体行业揭秘
  • 创业营销实战训练营
出现异常