之前的效果
修改之后的效果
代码如下:
<!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> <title>hello</title> <meta http-equiv="Content" "content=text/html; charset=utf-8" /> <script type="text/javascript" src="jquery-1.5.0-vsdoc.js"></script> <script type="text/javascript" src="jquery-1.4.2.js"></script> <style type="text/css"> body { font-size:13px } .artFram { border:solid 1px #ccc; background-color:#eee; 260px; padding:8px; word-break:break-all } .artList { line-height:1.8em } </style> <script type="text/javascript"> $( function() { var str= $(".artList a"); var str2= $(".artList :eq(2)"); str.click( function() { if($(this).html()=="显示") { $(this).html("隐藏"); str2.show(); } else { str2.hide(); str.html("显示"); } }) }) </script> </head> <body> <div class="artFram"> <div class="artList"> <span> </span> <span>一个优秀的程序开发员,除需掌握专业的开发语言,还要具有</span> <span style="display:none">执着、沉稳、细致的专业素质。</span> <a href="javascript:void(0)">显示</a> </div> </div> </body> </html>