JQuery入门——事件切换之toggle()方法应用介绍

  1、在toggle()方法中,可以依次调用N个指定的函数,直到最后一个函数,然后重复对这个函数轮番调用,其语法如下:toggle(fn, fn2, [fn3, fn4,...]),其中fn、fn2、fn3、fn4等函数依次调用。

  2、示例代码

  

复制代码 代码如下:

  <!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>toggle方法</title>

  <script type="text/javascript" src="jquery-1.8.3.min.js"></script>

  <style type="text/css">

  body{font-size:13px}

  img{border:solid 1px #ccc;padding:3px}

  </style>

  <script type="text/javascript">

  $(function(){

  $("img").toggle(function(){

  $("img").attr("src","Images/img05.jpg");

  $("img").attr("title",this.src);

  },function(){

  $("img").attr("src","Images/img06.jpg");

  $("img").attr("title",this.src);

  },function(){

  $("img").attr("src","Images/img07.jpg");

  $("img").attr("title",this.src);

  }

  )

  })

  </script>

  </head>

  <body>

  <img />

  </body>

  </html>

  3、效果图预览

  第一次点击:

JQuery入门——事件切换之toggle()方法应用介绍

  第二次点击:

JQuery入门——事件切换之toggle()方法应用介绍