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