编写html与js交互网页心得：编写两个按钮切换显示不同的图片
第一步:先建立一个html网页,如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div>
<div>
<input class="btnhy1" type="button" value="一楼" style="width: 80px;height: 30px; border: 2px; background: #2290E0;"/>
<input class="btnhy2" type="button" value="二楼" style="width: 80px;height: 30px; border: 2px; background: #2290E0;"/>
</div>
<div>
<img id="image1" src="img/111.jpg"/>
<img id="image2" src="img/222.jpg"/>
</div>
</div>
<script src="./js/jquery-1.8.3.min.js"></script>
<script src="./js/index.js"></script>
</body>
</html>
需要注意的是：index.js使用“$”时，必须要引用“ <script src="./js/jquery-1.8.3.min.js"></script>”，要不然就会报 “Uncaught ReferenceError: $ is not defined”错误，如果引用的路径不对就会报：“Failed to load resource: net::ERR_FILE_NOT_FOUND”
第二步：编写index.js的代码,代码如下：
//alert("111")
$("#image1").show();
$("#image2").hide();
});
//alert("222")
$("#image2").show();
$("#image1").hide();
});
编写html与js交互网页心得：编写两个按钮切换显示不同的图片的更多相关文章
- javascript DOM(2) 一个网页上切换显示不同的图片或文本
摘自: javascript DOM 编程艺术 1. 在一个网页上切换显示不同的图片 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tran ...
- 按钮切换显示不同的内容(js控制)
今天项目发现了一个jsp页面按钮切换,下面展示模块的不同显示问题,看到同事修改完之后的效果,js控制感觉特写好,所以想写把这个好的方法js记录下来,以便以后的参考. 一:先上图,了解大概的样子,如下图 ...
- Qt编写echart仪表盘JS交互程序支持webkit和webengine（开源）
Echart是百度研发团队开发的一款报表视图JS插件,功能十分强大,是本人用过的国产作品中最牛逼的,记得四五年前就在qt中使用过,当时用的浏览器控件是webkit,由于5.6以后的版本不再支持webk ...
- html css <input> javaScript .数据类型 JS中的函数编写方式 BOM总结 DOM总结
Day27 html css div 块标签. 特点: 独占一行,有高度和宽度 span 行元素. 特点:在同一行显示,当前行满了自动去下一行显示. 不识别高度和宽度 1.1.1.1 2.输入域标签 ...
- 编写高质量JS代码的68个有效方法（八）
[20141227]编写高质量JS代码的68个有效方法(八) *:first-child { margin-top: 0 !important; } body>*:last-child { ma ...
- 编写高质量JS代码的68个有效方法（七）
[20141220]编写高质量JS代码的68个有效方法(七) *:first-child { margin-top: 0 !important; } body>*:last-child { ma ...
- 编写高质量JS代码的68个有效方法（六）
[20141213]编写高质量JS代码的68个有效方法(六) *:first-child { margin-top: 0 !important; } body>*:last-child { ma ...
- 编写高质量JS代码的68个有效方法（四）
[20141129]编写高质量JS代码的68个有效方法(四) *:first-child { margin-top: 0 !important; } body>*:last-child { ma ...
- 编写高质量JS代码的68个有效方法（三）
[20141030]编写高质量JS代码的68个有效方法(三) *:first-child { margin-top: 0 !important; } body>*:last-child { ma ...
随机推荐
- tensorflow GPU版本安装及配置
经检测速度大幅度上升,不枉费我折腾了这么久,最坑的就是网上教程.书都没有写将cuda的bin加入全局变量,还是根据报错信息推出来的. 1.cuda9.0下载安装 https://developer.n ...
- CF401D Roman and Numbers
题意: 将n(n<=10^18)的各位数字重新排列(不允许有前导零) 求 可以构造几个mod m等于0的数字 分析: 状态压缩 状态: 设f[s][k]表示对于选择数字组合的s来说,%m等于k的 ...
- [noip][2017]
Day1T1 30分思路: 倒着枚举答案z,用扩展欧几里得求解,如果能找到两个非负整数x,y使得ax+by=z则继续枚举,直到无解为止 100分: 最适用与考场上的做法,根据30分思路打表找规律. 3 ...
- Zookeeper客户端Curator---Getting Started
先说个小插曲,前几天有个网站转载我的文章没有署名作者,我有点不开心就给他们留言了,然后今天一看他们把文章删了.其实我的意思并不是你允许转载,我想表达的是我的付出需要被尊重.也不知道是谁的错~ ==== ...
- 理解 PHP 依赖注入
Laravel框架的依赖注入确实很强大,并且通过容器实现依赖注入可以有选择性的加载需要的服务,减少初始化框架的开销,下面是我在网上看到的一个帖子,写的很好拿来与大家分享,文章从开始按照传统的类设计数据 ...
- jenkins master-slave配置
如果要想自动化构建,需要slave主机能够从源码库上拉代码,并打包构建 选取指定的slave进行构建 jenkins + docker 实现slave的动态构建和销毁 https://www.cnbl ...
- Hbase记录-HBase基本操作（一）
HBase创建表 可以使用命令创建一个表,在这里必须指定表名和列族名.在HBase shell中创建表的语法如下所示. create ‘<table name>’,’<column ...
- Kanboard简单的可视化任务板，项目管理
采用docker安装 简单快捷 下载 docker pull kanboard/kanboard:latest 运行 docker run -d --name kanboard -p 10080:80 ...
- Redis和Memcached对比【转】
Redis和Memcached对比 这两年 Redis火得可以,Redis也常常被当作 Memcached的挑战者被提到桌面上来.关于Redis与Memcached的比较更是比比皆是.然而,Redis ...
- Study 7 —— CSS美化背景和边框
图片透明度属性:opacity 背景图片重复属性:background-repeat背景图片位置属性:background-position background-postion:横坐标 纵坐标; b ...