第一步:先建立一个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的代码,代码如下：

$(".btnhy1").click(function() {
 //alert("111")
 $("#image1").show();
 $("#image2").hide();
});
$(".btnhy2").click(function() {
 //alert("222")
 $("#image2").show();
 $("#image1").hide();
});
 
总结：class  使用的是.(dot)，id使用的是#。

编写html与js交互网页心得：编写两个按钮切换显示不同的图片的更多相关文章

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

    摘自: javascript DOM 编程艺术 1. 在一个网页上切换显示不同的图片 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tran ...

  2. 按钮切换显示不同的内容(js控制)

    今天项目发现了一个jsp页面按钮切换,下面展示模块的不同显示问题,看到同事修改完之后的效果,js控制感觉特写好,所以想写把这个好的方法js记录下来,以便以后的参考. 一:先上图,了解大概的样子,如下图 ...

  3. Qt编写echart仪表盘JS交互程序支持webkit和webengine（开源）

    Echart是百度研发团队开发的一款报表视图JS插件,功能十分强大,是本人用过的国产作品中最牛逼的,记得四五年前就在qt中使用过,当时用的浏览器控件是webkit,由于5.6以后的版本不再支持webk ...

  4. html css <input> javaScript .数据类型 JS中的函数编写方式 BOM总结 DOM总结

    Day27  html css div 块标签. 特点: 独占一行,有高度和宽度 span 行元素. 特点:在同一行显示,当前行满了自动去下一行显示. 不识别高度和宽度 1.1.1.1 2.输入域标签 ...

  5. 编写高质量JS代码的68个有效方法（八）

    [20141227]编写高质量JS代码的68个有效方法(八) *:first-child { margin-top: 0 !important; } body>*:last-child { ma ...

  6. 编写高质量JS代码的68个有效方法（七）

    [20141220]编写高质量JS代码的68个有效方法(七) *:first-child { margin-top: 0 !important; } body>*:last-child { ma ...

  7. 编写高质量JS代码的68个有效方法（六）

    [20141213]编写高质量JS代码的68个有效方法(六) *:first-child { margin-top: 0 !important; } body>*:last-child { ma ...

  8. 编写高质量JS代码的68个有效方法（四）

    [20141129]编写高质量JS代码的68个有效方法(四) *:first-child { margin-top: 0 !important; } body>*:last-child { ma ...

  9. 编写高质量JS代码的68个有效方法（三）

    [20141030]编写高质量JS代码的68个有效方法(三) *:first-child { margin-top: 0 !important; } body>*:last-child { ma ...

随机推荐

  1. 【bzoj1565】 NOI2009—植物大战僵尸

    http://www.lydsy.com/JudgeOnline/problem.php?id=1565 (题目链接) 题意 给出$n*m$的棋盘,僵尸攻击每个格子可以获得$v$的分数,每个格子又会保 ...

  2. CF 991

    843名... 正规比赛肯定要掉分了...... 就算C没WA也是765名...为什么会这么菜呢? A,水.我加了两个特判. B,水.以 n * 4.5 为目标即可. C,裸二分,可耻的WA了一次是为 ...

  3. CrossFire Round #481 div.3 978 打后感

    虚拟赛,头一次打div.3感觉好TM水啊...... 一共7道题,我A了6道,第7题有思路但是没时间了. 结果还是排在700多名,可能其他人也觉得太水了吧. 逐一解析题目: A好简单,因为不想离散化我 ...

  4. P1274 魔术数字游戏 naive搜索+剪枝

    真的naive...... 我把所有能剪的枝都剪了才过的.否则就是TTT 还有个很神奇的事:数组作为参数传进递归函数时会造成上一层函数里的数组的改变.这个我TM调了一天. 下面奉上代码 #includ ...

  5. Android开发属性动画

    普通动画效果和属性动画效果区别: 普通动画效果的动画播放后只是产生了视觉欺骗,并没有移动真实的控件. 属性动画直接真实的移动控件 AnimationSet动画: TextView t1 = (Text ...

  6. ElasticSearch入门介绍一

    ElasticSearch 关于es的几个概念: 集群:多个运行es节点可以组成一个集群,它们拥有相同的cluster.name. 节点:运行es的实例 索引:相当于数据库database,一个集群可 ...

  7. springmvc 中@Controller和@RestController的区别

    @Controller和@RestController的区别? 官方文档:@RestController is a stereotype annotation that combines @Respo ...

  8. java基础-Idea开发工具介绍

    java基础-Idea开发工具介绍 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 之前给大家介绍过一款Java的IDE叫eclipse,有些功能用起来不是很得心应手,尤其是在导报的 ...

  9. Scala进阶之路-Spark本地模式搭建

    Scala进阶之路-Spark本地模式搭建 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.Spark简介 1>.Spark的产生背景 传统式的Hadoop缺点主要有以下两 ...

  10. 上传文件服务器与web内容服务分离

    现在难点在:     1\单击表单提交按钮后,图片上传到图片服务器,文字内容上传web服务器数据库,这两个服务器分别在两个城市.     2\图片不能通过web服务器中转.     3\web服务器内 ...