编写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 ...
随机推荐
- LOJ 2664. 「NOI2013」向量内积 解题报告
#2664. 「NOI2013」向量内积 两个 \(d\) 维向量 \(A=[a_1, a_2 ,...,a_d]\) 与 \(B=[b_1 ,b_2 ,...,b_d]\) 的内积为其相对应维度的权 ...
- Java中线程池的实现原理-求职必备
jdk1.5引入Executor线程池框架,通过它把任务的提交和执行进行解耦,只需要定义好任务,然后提交给线程池,而不用关心该任务是如何执行.被哪个线程执行,以及什么时候执行. 初始化线程池(4种) ...
- Holiday、Vacation、Days off、Leave、Break
http://write.scu.edu.tw/view.php?bd=mistake&no=25 這些字在英文的用法中都有放假.休息的意思,但用法卻不太一樣,接下來就來看看它們的不同吧. 『 ...
- git<git常用命令>
1,初始化仓库: git init --此命令会在当前目录下新建一个Git仓库.新建了一个 .git的隐藏目录,仓库的所有数据都放在这个目录里.目前还是空的. 2,跟踪,暂存文件: git add - ...
- java代码示例（3）
/** * 需求分析:根据输入的天数是否是周六或是周日, * 并且天气的温度大于28摄氏度,则外出游泳,否则钓鱼 * @author chenyanlong * 日期:2017/10/14 */ pa ...
- 带精英策略的快速非支配排序遗传算法 NSGA-II 算法
NSGAII(带精英策略的非支配排序的遗传算法),是基于遗传算法的多目标优化算法,是基于pareto最优解讨论的多目标优化,下面介绍pareto(帕累托)最优解的相关概念. Paerot支配关系 Pa ...
- mysql命令备份和还原
1.导出整个数据库 mysqldump -u用户名 -p密码 数据库名 > 导出的文件名 C:\Users\jack> mysqldump -uroot -pmysql sva_rec ...
- 注解 和 xml 配置的优缺点【转】
java annotation(注解) 的优点缺点 Annotation和xml各自作为配置项的优点与缺点. Annotation 一.Annotation 的优点 1.保存在 class 文件中,降 ...
- spring中用到了哪些设计模式
spring中用到了哪些设计模式?(顺丰) spring中常用的设计模式达到九种,我们举例说明: 第一种:简单工厂 又叫做静态工厂方法(StaticFactory Method)模式,但不属于23种G ...
- python 爆破
python 爆破 #!/usr/bin/python #-*- coding: GB2312 -*- #author:loversorry import urllib2 import urllib ...