<!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. layout（布局）组件

    一.依赖于 Panel(面 板)组件和 resizable(调整大小)组件. 二.class加载方式    <div id="box" class="easyui- ...

  2. 微信小程序の条件渲染

    <view> 今天吃什么 </view> <view wx:if="{{condition==1}}">饺子</view> < ...

  3. 杭电多校第六场-J-Ridiculous Netizens

    Problem Description Mr. Bread has a tree T with n vertices, labeled by 1,2,…,n. Each vertex of the t ...

  4. 【JS学习】慕课网4-10 编程练习

    在一个大学的编程选修课班里,我们得到了一组参加该班级的学生数据,分别是姓名.性别.年龄和年级,接下来呢,我们要利用JavaScript的知识挑出其中所有是大一的女生的的名字哦. 学生信息如下: ('小 ...

  5. codeforces 1B 模拟

    题目大意: 给出两种行列位置的表示方法,一个是Excel表示法,一个是(R,C)坐标表示.给出一种表示,输出另外一种表示. 基本思路: 模拟,首先判断是哪一种表示法,然后转换成另外一种表示方法: 我做 ...

  6. mysql通过表空间来恢复或者传递数据

    mysql的备份工具通常有 mysqldump ,mysqlpump(5.7后新特性)等备份工具,这里我们可以尝试使用表空间进行传递 方式是:拷贝数据文件+拷贝表空间   对应innodb引擎就是 i ...

  7. lct 模版题 bzoj 2002 2049

    很早就有人给我推荐的模版题,然后我最近才刷的(' '    ) 昨天的tree 不知道比他们高到哪里去了,我和他谈笑风生啊! bzoj 2002 弹飞绵羊 重点:这道题的cut和link 由于这道题链 ...

  8. 预处理+状态压缩+剪枝——codefoece 1209E

    那一步剪枝实在是没想到 #include<bits/stdc++.h> using namespace std; #define N 2005 struct Col{ ],Max[< ...

  9. Shell基础(三)：使用for循环结构、使用while循环结构、基于case分支编写脚本、使用Shell函数、中断及退出

    一.使用for循环结构 目标: 本案例要求编写一个Shell脚本chkhosts.sh,利用for循环来检测多个主机的存活状态,相关要求及说明如下: 1> 对192.168.4.0/24网段执行 ...

  10. npm cnpm node yarn

    1.yarn: windows 下需要下载msi文件, 2.npm,node 安装绿色版本 3.cnpm安装:npm install -g cnpm --registry=https://regist ...