编写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 ...
随机推荐
- 2019.3.28&2019.3.30考试
2019.3.28 : 肥肠爆芡,因为这场考试的题太屑了,所以我咕咕了 Upd on 2019.3.30 压进来一篇(因为都没啥意义) 2019.3.30 : 全机房读错题+没有大样例=T2全体爆炸 ...
- OI生涯回忆录 2017.9.10~2018.11.11
然而并没有退役 为了这两天,也准备了一年. 高一零基础的蒟蒻,NOIP2017仅有80pts 之后看着luogu的倒计时, 300天,200天,100天,30天, 直到10天.1天. 10号,11号的 ...
- P1186 玛丽卡 删边最短路最大值
反正蛮水的一道题. 胡雨菲一句话让我的代码减少了10行还A了,之前的是个错的. 思路:先求出最短路,然后依次删去最短路上的每一条边,跑最短路求最大值. 关于删边:我的想法是当作链表删除,把last的n ...
- Codeforces Round #514 (Div. 2) D. Nature Reserve
http://codeforces.com/contest/1059/problem/D 最大值: 最左下方和最右下方分别有一个点 r^2 - (r-1)^2 = (10^7)^2 maxr<0 ...
- MATLAB：图像选取局部区域滤波（roicolor、roipoly、roifill、fspecial、roifilt2函数）
对于某些特殊的图像处理,我们不希望将整张图都进行图像处理.这个时候就用到了roicolor.roipoly.roifill.fspecial.roifilt2函数.代码实现过程如下: close al ...
- 多线程之间的通信（等待唤醒机制、Lock 及其它线程的方法）
一.多线程之间的通信. 就是多个线程在操作同一份数据, 但是操作的方法不同. 如: 对于同一个存储块,其中有两个存储位:name sex, 现有两个线程,一个向其中存放数据,一个打印其中的数据. ...
- 2018.9青岛网络预选赛(B)
传送门:Problem(B) https://www.cnblogs.com/violet-acmer/p/9664805.html 参考资料: https://blog.csdn.net/qq_40 ...
- nginx 反向代理案例
server{ listen ssl; server_name a.xxxxx.com; root /home/wwwroot/default/asqumo; ssl_protocols TLSv1. ...
- Prometheus jvm_exporter监控zookeeper
Zookeeper Prometheus 监控zookeeper使用jvm_exporter来采集数据,jvm_exporter是一个可以配置抓取和暴露JMX目标的mBeans的收集器. 下载java ...
- 决策树--信息增益，信息增益比，Geni指数的理解
决策树 是表示基于特征对实例进行分类的树形结构 从给定的训练数据集中,依据特征选择的准则,递归的选择最优划分特征,并根据此特征将训练数据进行分割,使得各子数据集有一个最好的分类的过程. ...