编写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 ...
随机推荐
- bash执行命令分别输出正常日志和错误日志
0. 说明 执行bash命令的定时任务时候,希望能把正常的日志输出到一个文件里面,同时如果执行的过程发生异常则把异常日志输出到另一个不同的文件中.方便今后异常排查,极大有利于快速定位出错位置. 需要了 ...
- 【模板】第 K 大数
题目:给定一个序列,求其第 K 大的数是多少. 时间复杂度\(O(n)\) 代码如下: #include <bits/stdc++.h> using namespace std; cons ...
- 在Linux上安装Elasticsearch Kibaba.md
在Linux上安装Elasticsearch Kibaba Kibana是一个开源为elasticsearch 引擎提供数据和数据分析 1.下载安装 切换到root账户,按顺序依次执行以下命令 rpm ...
- Vue.js 模板指令
1. 数据渲染:v-text.v-html(保存了html结构).{{}}(自动更新): 2. 控制模块隐藏:v-if:直接不渲染 DOM 元素: v-show:css 里的 display:none ...
- WinForm ListView虚拟模式加载数据 提高加载速度
将VirtualMode 属性设置为 true 会将 ListView 置于虚拟模式.控件不再使用Collection.Add()这种方式来添加数据,取而代之的是使用RetrieveVirtualIt ...
- CodeForces - 455C Civilization （dfs+并查集）
http://codeforces.com/problemset/problem/455/C 题意 n个结点的森林,初始有m条边,现在有两种操作,1.查询x所在联通块的最长路径并输出:2.将结点x和y ...
- C语言上机复习（一）文件操作
C语言—文件操作 1.1 fgetc() + fputc(): 以 字符 形式存取数据定义文件指针 #define _CRT_SECURE_NO_WARNINGS #include <cstdi ...
- Java面试题系列（三）Java new一个对象的过程中发生了什么
Person class Person{ private String name; private int age; public Person() { super(); } public Perso ...
- 51nod1331 狭窄的通道
题目传送门 这道题 51nod只Ac了十二个人 没有题解可以研究 所以就自己YY了半天 在这里先感谢一波岚清大爷 orz 然后这道题我分了两种情况 一种是左边的往左跑右边的往右跑 中间有一部分直接走不 ...
- FineReport: 清空(重置)条件reset()
在使用控件时,有时我们希望能够快捷的重置控件的内容,或者重置所有控件的内容,效果如下图所示: 1.给需要重置的控件设置控件名 2.给重置按钮设置点击事件 3.点击事件中加入javascript代码 只 ...