第一步:先建立一个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. 2019.3.28&2019.3.30考试

    2019.3.28 : 肥肠爆芡,因为这场考试的题太屑了,所以我咕咕了 Upd on 2019.3.30 压进来一篇(因为都没啥意义) 2019.3.30 : 全机房读错题+没有大样例=T2全体爆炸 ...

  2. OI生涯回忆录 2017.9.10~2018.11.11

    然而并没有退役 为了这两天,也准备了一年. 高一零基础的蒟蒻,NOIP2017仅有80pts 之后看着luogu的倒计时, 300天,200天,100天,30天, 直到10天.1天. 10号,11号的 ...

  3. P1186 玛丽卡 删边最短路最大值

    反正蛮水的一道题. 胡雨菲一句话让我的代码减少了10行还A了,之前的是个错的. 思路:先求出最短路,然后依次删去最短路上的每一条边,跑最短路求最大值. 关于删边:我的想法是当作链表删除,把last的n ...

  4. Codeforces Round #514 (Div. 2) D. Nature Reserve

    http://codeforces.com/contest/1059/problem/D 最大值: 最左下方和最右下方分别有一个点 r^2 - (r-1)^2 = (10^7)^2 maxr<0 ...

  5. MATLAB:图像选取局部区域滤波(roicolor、roipoly、roifill、fspecial、roifilt2函数)

    对于某些特殊的图像处理,我们不希望将整张图都进行图像处理.这个时候就用到了roicolor.roipoly.roifill.fspecial.roifilt2函数.代码实现过程如下: close al ...

  6. 多线程之间的通信(等待唤醒机制、Lock 及其它线程的方法)

    一.多线程之间的通信. 就是多个线程在操作同一份数据, 但是操作的方法不同. 如: 对于同一个存储块,其中有两个存储位:name   sex, 现有两个线程,一个向其中存放数据,一个打印其中的数据. ...

  7. 2018.9青岛网络预选赛(B)

    传送门:Problem(B) https://www.cnblogs.com/violet-acmer/p/9664805.html 参考资料: https://blog.csdn.net/qq_40 ...

  8. nginx 反向代理案例

    server{ listen ssl; server_name a.xxxxx.com; root /home/wwwroot/default/asqumo; ssl_protocols TLSv1. ...

  9. Prometheus jvm_exporter监控zookeeper

    Zookeeper Prometheus 监控zookeeper使用jvm_exporter来采集数据,jvm_exporter是一个可以配置抓取和暴露JMX目标的mBeans的收集器. 下载java ...

  10. 决策树--信息增益,信息增益比,Geni指数的理解

    决策树 是表示基于特征对实例进行分类的树形结构       从给定的训练数据集中,依据特征选择的准则,递归的选择最优划分特征,并根据此特征将训练数据进行分割,使得各子数据集有一个最好的分类的过程.   ...