欢迎来到我爱模板网,请记住我们的域名5imoban.net。本站资源大部分免费下载。如需定制,可联系站长QQ543031222。如果您觉得本站不错,请推荐给您的好友!
各位热心的网友们,欢迎给本站留言!您的任何建议和意见本站都会认真查看,仔细采纳!
jQuery的toggle很好用,运行下面的代码查看toggle的效果:
<!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> <script src="http://www.5imoban.net/download/jquery/jquery-1.8.3.min.js"></script> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery toggle方法 ---- 网站模板</title> </head> <body> <div style="width:200px; height:200px; background:red;"></div> <script language="javascript"> $(function(){ $("div").toggle( function(){$(this).css("background","green");}, function(){$(this).css("background","blue");}, function(){$(this).css("background","yellow");}, function(){$(this).css("background","red");} ); }) </script> </body> </html> 提示:您可以先修改部分代码再运行
<!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> <script src="http://www.5imoban.net/download/jquery/jquery-1.8.3.min.js"></script> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>简单方法替换toggle,实现同样的功能</title> </head> <body> <div style="width:200px; height:200px; background:red;"></div> <script language="javascript"> $(function(){ var i = 1; $("div").click(function(){ if(i==1){ $(this).css("background","green"); i=2; }else if(i==2){ $(this).css("background","blue"); i=3; }else if(i==3){ $(this).css("background","yellow"); i=4; }else if(i==4){ $(this).css("background","red"); i=1; } }) }) </script> </body> </html> 提示:您可以先修改部分代码再运行