编写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 ...
随机推荐
- linux-shell数据重定向详细分析
在了解重定向之前,我们先来看看linux 的文件描述符.linux文件描述符:可以理解为linux跟踪打开文件,而分配的一个数字,这个数字有点类似c语言操作文件时候的句柄,通过句柄就可以实现文件的读写 ...
- 转载：Unity3D游戏对象消失enabled、Destroy与active的区别
转自:http://www.manew.com/3276.html Unity3D游戏对象消失三种方法的区别: gameObject.active:是否在场景中停用该物体,在你gameObject.a ...
- DIVCNT2&&3 - Counting Divisors
DIVCNT2 - Counting Divisors (square) DIVCNT3 - Counting Divisors (cube) 杜教筛 [学习笔记]杜教筛 (其实不算是杜教筛,类似杜教 ...
- java后端面试
背景:最近在找工作,但是发现每次找的时候都需要整理一些基础知识,这些点又是面试过程中经常被问到的,每次都进行整理很麻烦,所以有打算好好总结下. 转载自:https://www.cnblogs.com/ ...
- word产品密钥激活
1.找到对应版本 2.在网上找对应的破解软件和激活密钥 注意有些软件是不能在你的电脑上运行达到所要结果的,多试几个 有点软件在打开时需要把杀毒软件关了.下载后先杀毒确定没有病毒后,把把杀毒软件关了,并 ...
- 版本控制工具Git工具快速入门-Linux篇
版本控制工具Git工具快速入门-Linux篇 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.版本管理系统的介绍 1>.版本管理系统的特点 1.1>.自动生成备份: ...
- CentOS下安装zookeeper并设置开机自启动
转自: 一.安装zookeeper # cd /opt/ # mkdir zookeeper # cd zookeeper/ # tar -zxvf zookeeper-3.4.6.tar.gz # ...
- golang匿名结构体
go语言定义结构体类型时可以仅指定字段类型而不指定字段名字.这种字段叫做匿名字段(anonymous field). Go语言有一个特性允许只声明一个成员对应的数据类型而不指名成员的名字:这类成员就 ...
- JavaScript 数字转汉字+element时间选择器快速选择
window.CN = { : '一', : '二', : '三', : '四', : '五', : '六', : '七', : '八', : '九', : '零' } window.LEVEL = ...
- java实现网页验证码
Servlet: package cn.bdqn.servlet; import javax.imageio.ImageIO; import javax.servlet.ServletExceptio ...