<!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title></title>

         <style>

             td, img {

                 width: 100px;

                 height: 100px;

             }

         </style>

     </head>

     <body>

         <table border="1px" >

             <tr>

                 <td><img src="data:images/1.jpg"/></td>

                 <td><img src="data:images/2.jpg"/></td>

                 <td><img src="data:images/11.jpg"/></td>

             </tr>

         </table>

         <img id="showImg" src="data:images/1.jpg"/>

         <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

         <script>

             $(function(){

                 $("tr img").click(function () {

                     $("#showImg").attr("src", $(this).attr("src"));

                     console.log($(this).index("tr img"));

                 })

             })

         </script>

     </body>

 </html>

jq-demo-点击改变图片的更多相关文章

  1. jquery点击改变图片src源码并toggle

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. jquery点击改变class并toggle；jquery点击改变图片src源码并toggle；jquery显示隐藏toggle

    <html><head><meta charset="utf-8"><title></title><script ...

  3. jq demo 点击弹窗，居中，可滚动，可拖动

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. jq demo 点击评分组件

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. jq demo 点击选中元素左右移动

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...

  6. jq demo 轮播图，图片可调用，向左，自动+鼠标点击切换

    <!doctype html> <html> <head> <meta http-equiv="Content-Type" content ...

  7. jq demo 轮播图，图片可调用，向上，自动+鼠标点击切换

    1 <!doctype html> <html> <head> <meta http-equiv="Content-Type" conte ...

  8. 一款基于jquery的下拉点击改变背景图片

    今天给大家介绍一款基于jquery的下拉点击改变背景图片.单击右上角的图片,下拉显示可选择的背景图片,单击图片变为背景图.效果图下: 在线预览   源码下载 实现的代码. html代码: <a ...

  9. 22.用demo通过点击切换图片路径

    用demo通过点击切换图片路径 html: <img src="images/driving.png" class="driving"/> js: ...

随机推荐

  1. mysql添加外键语句

    sql语句格式: · 添加外键约束:alter table 从表 add constraint 外键(形如:FK_从表_主表) foreign key (从表外键字段) references 主表(主 ...

  2. Jenkins企业应用进阶详解(一)

    Jenkins企业应用进阶详解(一) 链接:https://pan.baidu.com/s/1NZZbocZuNwtQS0eGkkglXQ 提取码:z7gj 复制这段内容后打开百度网盘手机App,操作 ...

  3. 删除DataFrame中特定条件的行/列

    在<Python进行数据分析与挖掘实战>一书中,第10章 删除热水器不工作的数据(水流量为0并且开关机状态为“关”的数据.) import pandas as pd data=pd.rea ...

  4. 【Luogu】【关卡1-8】BOSS战-入门综合练习2（2017年10月）【AK】------都是基础题

    P1426 小鱼会有危险吗 我个人觉得这个题目出的不好,没说明白,就先只粘贴的AC代码吧 #include <bits/stdc++.h> using namespace std; int ...

  5. es5-class

    1. 通过class定义类/实现类的继承2. 在类中通过constructor定义构造方法3. 通过new来创建类的实例4. 通过extends来实现类的继承5. 通过super调用父类的构造方法6. ...

  6. hdu 4300 拓展kmp

    题目大意: 输入样例个数,每个样例有两行,第一行是26个字母,分别代表a~z加密后的密文:第二行代表一串密文+明文,密文一定是完整的,但明文可能不完整,让你输出最短的(密文+明文): 基本思路: 拓展 ...

  7. H5新属性 contenteditable

    contenteditable 属性规定元素内容是否可编辑 <div contenteditable style="width: 100px;height:100px"> ...

  8. 自定义solr域中的配置

    <!-- IKAnalyzer--> <fieldType name="text_ik" class="solr.TextField"> ...

  9. 用 Windows Live Writer 和 SyntaxHighlighter 插件写高亮代码

    博客园内置支持SyntaxHighlighter代码着色,代码着色语法:<pre class='brush:编程语言'>代码</pre>. 需要注意的是:如何你使用Syntax ...

  10. elipse手机设备显示Target unknown或者offline解决方法

    参考资料: http://blog.csdn.net/yuanjingjiang/article/details/11297433 http://www.educity.cn/wenda/153487 ...