<!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. C# Copy一个文件到另一个文件夹下

    public static void CopyToFile() { //源文件路径 string sourceName = @"D:\Source\Test.txt"; //目标路 ...

  2. Codeforces 348E 树的中心点的性质 / 树形DP / 点分治

    题意及思路:http://ydc.blog.uoj.ac/blog/12 在求出树的直径的中心后,以它为根,对于除根以外的所有子树,求出子树中的最大深度,以及多个点的最大深度的lca,因为每个点的最长 ...

  3. 【hihoCoder】每周一题（从week 220开始）

    2018/9/17-2018/9/23  week 220 push button I 题目链接:https://hihocoder.com/contest/hiho220/problem/1 有N个 ...

  4. 通信矩阵转DBC

    DBC的制作对于一些人来时比较陌生,熟悉的人做他感觉浪费时间(像我这样的),于是自己用PYTHON写了一个脚本,还挺好用的,只需要填写表格就好了,省出来大部分的时间. 分享下思路, 来看下DBC的文本 ...

  5. eclipse中server location为灰色,不能修改

    当自己用eclipse写好了web项目后,也同时配置了服务器(tomcat6), 上面部署完毕后,直接访问http://localhost:8080 发现是 无法访问的,这是因为,Servers这里的 ...

  6. vue 同时使用过渡和动画

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  7. bootstrap 好看的上传组件

    <!DOCTYPE html> <html> <head> <title></title> <link rel="style ...

  8. Delphi中点击网页弹出的Alert对话框的确定按钮

    思路: 使用Windows API函数遍历窗口,查找指定标题的窗口,然后从该窗口查找确定按钮,向该按钮发送鼠标消息进行模拟点击.由于IE8由Alert弹出的网页对话框的标题是“来自网页的消息”,而IE ...

  9. Java Number&Math类

    Java Number类 一般地,当需要使用数字的时候,我们通常使用内置数据类型,如:byte.int.long.double等. 实例 int i = 5000; float gpa = 13.65 ...

  10. 【索引】位图BitMap索引

    位图(BitMap)索引 前段时间听同事分享,偶尔讲起Oracle数据库的位图索引,顿时大感兴趣.说来惭愧,在这之前对位图索引一无所知,因此趁此机会写篇博文介绍下位图索引. 1. 案例 有张表名为ta ...