html里多个交互怎么同时显示,编写html与js交互网页心得：编写两个按钮切换显示不同的图片...

第一步:先建立一个html网页,如下：

       

     

需要注意的是：index.js使用“$”时，必须要引用“ ”，要不然就会报 “Uncaught ReferenceError: $ is not defined”错误，如果引用的路径不对就会报：“Failed to load resource: net::ERR_FILE_NOT_FOUND”

第二步：编写index.js的代码,代码如下：

$(".btnhy1").click(function() {

//alert("111")

$("#image1").show();

$("#image2").hide();

});

$(".btnhy2").click(function() {

//alert("222")

$("#image2").show();

$("#image1").hide();

});

总结：class  使用的是.(dot)，id使用的是#。

javascript DOM(2) 一个网页上切换显示不同的图片或文本

摘自: javascript DOM 编程艺术 1. 在一个网页上切换显示不同的图片 /p>

按钮切换显示不同的内容(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 ...

随机推荐

Gvim常用命令

这是一篇较全的vim命令.特记录下来,有稍作修改说明.摘http://hi.baidu.com/ui176/item/b00ae7c0eeaba52847d5c0c5 Vim常用命令 跳到指定的行号: ...

圆形图片CircleImageView

github源码路径: https://github.com/hdodenhof/CircleImageView 第一步:将CircleImageView复制 第二步:将attrs.xml复制 第三步 ...

Webservice加上SoapHeader验证方式

提供一种基于SoapHeader的自定义验证方式,代码如下: public class MySoapHeader : System.Web.Services.Protocols.SoapHeader ...

springBoot系列教程07：异常捕获

发生异常是很正常的事,异常种类也是千奇百怪,发生异常并不可怕,只要正确的处理,并正确的返回错误信息并无大碍,如果不进行捕获或者处理,分分钟服务器宕机是很正常的事 所以处理异常时,最基本的要求就是发生异 ...

java实现求最大子数组和的逐步显示

package 最大的子数组和; import java.util.Scanner; public class shuzu { public static int maxArr(int a[]) { ...

Unity3D加密保护解决方案

精锐5加密锁支持Unity3D代码及资源保护,并提供授权方案 产品简介 可使用Virbox Protector加壳工具对Unity3D代码进行加密.Unity3D使用开源mono C#语法,代码会编译 ...

lumen

HTTP路由 基本路由 路由参数 必填参数 可选参数 正则表达式约束 命名路由 路由组 中间件 命令空间 路由前缀 基本路由 你可以在 route/web.php 文件中定义应用程序的全部路由.最基本 ...

ArcGIS中的WKID(转)

ArcGIS中的WKID link: https://www.cnblogs.com/liweis/p/5951032.html 提到坐标系统,大家多少能明白一些,但在运用时,有些朋友搞得不是非常清楚 ...

C#重点内容之：事件(Event)

一.事件的五个组成部分 事件的五个部分: 事件拥有者(对象) 事件成员(Event ,成员) 事件的响应者(对象) 事件处理器(成员,本质是一个回调方法) 事件订阅——把事件处理器与事件关联在一起 二 ...

$.ajax()——超时设置，增加 loading 提升体验

前端发送Ajax请求到服务器,服务器返回数据这一过程,因原因不同耗时长短也有差别,且这段时间内页面显示空白.如何优化这段时间内的交互体验,以及长时间内服务器仍未返回数据这一问题,是我们开发中不容忽视的 ...