<!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. Spring项目下js文件无法引用

    问题:最近练习spring-mvc框架的时候,引用了jQuery,但是运行的时候,jQuery做的事情都没有响应,代码也没有任何报错,在网上找了一下,发现是由于spring配制的是/,所有的资源都被屏 ...

  2. offset 、 client 和 scroll - PC端网页特效

    1.元素偏移量  offset 系列 1.1 offset 就是偏移量,使用 offset 系列相关属性可以 动态 得到该元素的位置(偏移).大小等. 注意: 1.获得元素距离带有定位父元素的位置 2 ...

  3. Input标签文件上传，使用详解

    1.html添加标签按钮 <button ion-button (click)="selectVideo()">添加</button> <input ...

  4. EXCEL数据计算不准确的问题

    今天,某部门的excel的数值计算,总是出现错误.如下图 ,我们的46那一栏是有前面8*6得出来的,但是结果却显示46,明明应该是48才对,然后再往上追,8是有前面的337-329得出来的,337是有 ...

  5. [转载]MinGW安装过程

    本文转自https://blog.csdn.net/my_wade/article/details/46941645 MinGW安装过程 一． 下载 MinGW官网下载地址:http://source ...

  6. php获取微信openid

    使用微信接口,无论是自动登录还是微信支付我们首先需要获取的就是openid,获取openid的方式有两种,一种是在关注的时候进行获取,这种订阅号就可以获取的到,第二种是通过网页授权获取,这种获取需要的 ...

  7. 文件系统类型（ext4、ntfs）

    Linux 1.Linux:存在几十个文件系统类型:ext2,ext3,ext4,xfs,brtfs,zfs(man 5 fs可以取得全部文件系统的介绍) 不同文件系统采用不同的方法来管理磁盘空间,各 ...

  8. php-数据库-分页类-上传类

    config.ini.php <?php header("content-type:text/html;charset=utf-8"); //项目的根目录 define(&q ...

  9. vs code自动生成html代码

    在dreamveawer中新建一个htm自动会生成一个标准的html代码,那在vscode得一行一行写吗?太烦了吧,各种关键词搜,哎妈 终于找到了办法,现在这里记录下: 第一步:在空文档中输入! 第二 ...

  10. delphi dll调用问题

    dll传递string实现方法 delphi中dll传递string的实现方法: dll项目uses第一个引用sharemem单元; 调用的项目uses第一个引用sharemem单元; 调用的单元us ...