search

Home  >  Article  >  Web Front-end  >  Jquery method to dynamically switch pictures_jquery

Jquery method to dynamically switch pictures_jquery

WBOY
WBOYOriginal
2016-05-16 15:58:361343browse

The example in this article describes the method of dynamically switching images using Jquery. Share it with everyone for your reference. The specific implementation method is as follows: 

<!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>

I hope this article will be helpful to everyone’s jQuery programming.

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：JQuery implements the method of dynamically adding and deleting comments_jqueryNext article：JQuery implements the method of dynamically adding and deleting comments_jquery

Related articles

See more