编写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 ...
随机推荐
- 【转】IAR IDE for MSP430、8051、ARM等平台的结合使用
IAR IDE for MSP430.8051.ARM等平台的结合使用 以前很长一段时间使用IAR作为MSP430的开发平台,前几天一个无线监控的项目用到了Zigbee(CC2530),于是开始使用I ...
- 深入理解Adaboost算法
理解算法确实是欲速则不达,唯有一步一步慢慢看懂,然后突然觉得写的真的太好了,那才是真的有所理解了. Adaboost的两点关键点: 1. 如何根据弱模型的表现更新训练集的权重: 2. 如何根据弱模型的 ...
- detectMultiScale 读取冲突的一个解决方法
背景:用的是opencv的HOGDescriptor检测行人,实例化为hog:使用默认的行人检测器: hog.setSVMDetector(cv::HOGDescriptor::getDefaultP ...
- 在任意位置获取应用程序CONTEXT
Android程序中访问资源时需要提供Context,一般来说只有在各种component中(Activity, Provider等等)才能方便的使用api来获取Context, 而在某些工具类中要获 ...
- AtCoder Regular Contest 076 F - Exhausted?
题意: n个人抢m个凳子,第i个人做的位置必须小于li或大于ri,问最少几个人坐不上. 这是一个二分图最大匹配的问题,hall定理可以用来求二分图最大匹配. 关于hall定理及证明,栋爷博客里有:ht ...
- json模块和pickle模块（二十二）
之前我们学习过用eval内置方法可以将一个字符串转成python对象,不过,eval方法是有局限性的,对于普通的数据类型, json.loads和eval都能用,但遇到特殊类型的时候,eval就不管用 ...
- 一个小时学会Oracle数据库
一.数据库概要 二.Oracle简介 三.安装运行Oracle数据库 四.使用GUI操作MySQL 五.使用SQL访问Oracle数据库 六.下载程序.帮助.视频 Oracle视频下载(111班):h ...
- poj 1064(二分答案)
传送门:Problem 1064 https://www.cnblogs.com/violet-acmer/p/9793209.html 题意: 有N条绳子,长度分别为 length[1,2,3,.. ...
- vs widows服务的调试
1.使用.net 工具安装你开发好的服务 2.服务运行后在Vs中选择调试>附加到进程 4.选择安装好运行的服务,选择附加
- 教你如何用Meterpreter渗透Win系统
在这篇文章中,我们将跟大家介绍如何使用Meterpreter来收集目标Windows系统中的信息,获取用户凭证,创建我们自己的账号,启用远程桌面,进行屏幕截图,以及获取用户键盘记录等等. 相关Payl ...