Jquery实现动态切换图片的方法
更新时间：2015年05月18日 12:26:23 作者：永远爱好写程序
这篇文章主要介绍了Jquery实现动态切换图片的方法,涉及jQuery页面元素操作及链式操作的相关技巧,需要的朋友可以参考下
本文实例讲述了Jquery实现动态切换图片的方法。分享给大家供大家参考。具体实现方法如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
#tbl{border-collapse:collapse;border-top:1px solid red;border-left:1px solid red;margin:auto;}
#tbl td{border-collapse:collapse;border-bottom:1px solid red;border-right:1px solid red;}
#main{margin:0px auto;border:1px solid yellow;}
</style>
<script src="jquery-1.6.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
var $imgs;
var $tds;
$(function () {
$tds = $("#tbl td");
$tds.click(function () {
//说明:
//$("img", $(this))表示当前td下的img元素
//$("img", $(this).siblings("td")) 表示当前td的所有兄弟元素(并且要求是td)下的img元素
$("img", $(this)).attr("src", "../images/select.JPG");
$("img", $(this).siblings("td")).attr("src", "../images/noselect.JPG");
});
}
);
</script>
</head>
<body>
<div id="main">
<table id="tbl">
<tbody>
<tr>
<td><img src="../images/noselect.JPG" /></td>
<td><img src="../images/noselect.JPG" /></td>
<td><img src="../images/noselect.JPG" /></td>
<td><img src="../images/noselect.JPG" /></td>
<td><img src="../images/noselect.JPG" /></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
希望本文所述对大家的jQuery程序设计有所帮助。
相关文章
短几句jquery代码实现一个图片向上滚动切换，需要的朋友可以参考下。2011-09-09
本篇文章主要介绍了jQuery实现多张图片上传预览（不经过后端处理）的相关知识。具有很好的参考价值。下面跟着小编一起来看下吧2017-04-04
最近使用ajaxform有点频繁，今天小编抽时间给大家记录下有关jquery中的ajaxSubmit使用讲解的知识，非常不错，感兴趣的朋友参考下吧2016-09-09
本文给大家分享的功能是这样的：你点击一下顶或踩按钮，记录数值到数据库，并且有颜色的背景跟着变，按照百分比的变化。这样就可以通过背景颜色一眼就看清楚那边支持的人比较多。2015-07-07
jQuery的三种bind/One/Live/On事件绑定使用方法
jQuery是 一款优秀的JavaScript框架,在旧版里主要用bind()方法，在新版里又多了两种One(),Live()，下面介绍这几种方法的使用2017-02-02
可以将分页获取的内容依次填入四个div中，瀑布流的分页可以以多页（比如5页）为单位二次分页，这样可以减少后台算法的复杂度;测试环境：ie8 ff13.0.1 chrome22有兴趣的朋友可以了解下2013-01-01
这篇文章主要介绍了JQuery中Text方法用法,实例分析了Text方法设置文本内容的使用方法,非常简单实用,需要的朋友可以参考下2015-05-05
jquery hover 不停闪动问题的解决方法(亦为stop()的使用)
下面小编就为大家带来一篇jquery hover 不停闪动问题的解决方法(亦为stop()的使用)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-02-02
今天小编就为大家分享一篇jquery判断滚动条距离顶部的距离方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要为大家详细介绍了jQuery制作网页版选项卡的相关方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-07-07
最新评论