1。
1 <%@ page language="java" contentType="text/html; charset=UTF-8" 2 pageEncoding="UTF-8"%> 3 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 4 <html> 5 <head> 6 <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> 7 <title>事件处理之提供更多链接</title> 8 <style type="text/css"> 9 .readmore { 10 color: blue; 11 font-size: 0.8em; 12 font-style: italic; 13 text-decoration: underline; 14 } 15 </style> 16 <script src="jquery-1.5.2.js" type="text/javascript"></script> 17 <script type="text/javascript"> 18 $(document).ready(function(){ 19 /* 20 * .show(speed, callback) 21 * speed可以取slow、normal、fast三种 22 * callback是动画完成时回调的函数 23 * .hide同上 24 */ 25 $('.message').hide(); 26 $('span.readmore').toggle( 27 function(){ 28 $('.message').show('slow'); 29 $(this).html('<pre>Read Less...</pre>'); 30 }, 31 function(){ 32 $('.message').hide('slow'); 33 $(this).html('<pre>Read More...</pre>'); 34 } 35 ); 36 //$('span.readmore').click(function(){ 37 //$('.message').show('fast'); 38 //$(this).hide(); 39 //}); 40 41 }); 42 </script> 43 <body> 44 <div>Style makes formatting job more easier</div> 45 <span class="readmore"><pre>Read More...</pre></pre></span> 46 <div class="message"> 47 To give an attractive look to a web site, you should have a good knowledge of style use. 48 And it's also necessary to gain some knowlege of JS and jQuery. 49 </div> 50 </body> 51 </html>
