今天看啥
热点:

Jquery实现动态切换图片的方法


   本文实例讲述了Jquery实现动态切换图片的方法。分享给大家供大家参考。具体实现方法如下:

  ?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

<!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程序设计有所帮助。

www.bkjia.comtruehttp://www.bkjia.com/Javascript/1002343.htmlTechArticleJquery实现动态切换图片的方法 本文实例讲述了Jquery实现动态切换图片的方法。分享给大家供大家参考。具体实现方法如下: ? 1 2 3 4 5 6 7...

相关文章

相关搜索: Jquery 动态 图片

帮客评论

视觉看点