Jquery實現(xiàn)動態(tài)切換圖片的方法
更新時間：2015年05月18日 12:26:23 作者：永遠(yuǎn)愛好寫程序
這篇文章主要介紹了Jquery實現(xiàn)動態(tài)切換圖片的方法,涉及jQuery頁面元素操作及鏈?zhǔn)讲僮鞯南嚓P(guān)技巧,需要的朋友可以參考下
本文實例講述了Jquery實現(xiàn)動態(tài)切換圖片的方法。分享給大家供大家參考。具體實現(xiàn)方法如下：
<!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))表示當(dāng)前td下的img元素
//$("img", $(this).siblings("td")) 表示當(dāng)前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程序設(shè)計有所幫助。
相關(guān)文章
簡短幾句jquery代碼的實現(xiàn)一個圖片向上滾動切換
短幾句jquery代碼實現(xiàn)一個圖片向上滾動切換，需要的朋友可以參考下。2011-09-09
jQuery實現(xiàn)多張圖片上傳預(yù)覽（不經(jīng)過后端處理）
本篇文章主要介紹了jQuery實現(xiàn)多張圖片上傳預(yù)覽（不經(jīng)過后端處理）的相關(guān)知識。具有很好的參考價值。下面跟著小編一起來看下吧2017-04-04
最近使用ajaxform有點頻繁，今天小編抽時間給大家記錄下有關(guān)jquery中的ajaxSubmit使用講解的知識，非常不錯，感興趣的朋友參考下吧2016-09-09
PHP結(jié)合jQuery實現(xiàn)的評論頂、踩功能
本文給大家分享的功能是這樣的：你點擊一下頂或踩按鈕，記錄數(shù)值到數(shù)據(jù)庫，并且有顏色的背景跟著變，按照百分比的變化。這樣就可以通過背景顏色一眼就看清楚那邊支持的人比較多。2015-07-07
jQuery的三種bind/One/Live/On事件綁定使用方法
jQuery是 一款優(yōu)秀的JavaScript框架,在舊版里主要用bind()方法，在新版里又多了兩種One(),Live()，下面介紹這幾種方法的使用2017-02-02
jquery簡單瀑布流實現(xiàn)原理及ie8下測試代碼
可以將分頁獲取的內(nèi)容依次填入四個div中，瀑布流的分頁可以以多頁（比如5頁）為單位二次分頁，這樣可以減少后臺算法的復(fù)雜度;測試環(huán)境：ie8 ff13.0.1 chrome22有興趣的朋友可以了解下2013-01-01
這篇文章主要介紹了JQuery中Text方法用法,實例分析了Text方法設(shè)置文本內(nèi)容的使用方法,非常簡單實用,需要的朋友可以參考下2015-05-05
jquery hover 不停閃動問題的解決方法(亦為stop()的使用)
下面小編就為大家?guī)硪黄猨query hover 不停閃動問題的解決方法(亦為stop()的使用)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-02-02
今天小編就為大家分享一篇jquery判斷滾動條距離頂部的距離方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要為大家詳細(xì)介紹了jQuery制作網(wǎng)頁版選項卡的相關(guān)方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-07-07