1.单击图片显示图片边框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>单击图片显示边框</title> <script src="http://code.jquery.com/jquery-1.12.4.min.js"></script> </head> <body> <div> <img src="../初识jQuery/pic.gif"> </div> </body> <script> $(function () { $("img").click(function () { $("img").css("border","1px solid black") }) }) </script> </html>
2.单击链接显示内容
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>作品</title> <style> h1{ background: #333333; color: #FFFFED; text-align: center; } div{ text-align: center; } #a p:nth-of-type(1){ text-indent: 4em; } #a p:nth-of-type(2){ text-indent: 2em; } #a p:nth-of-type(3){ text-indent: -26em; } #a p:nth-of-type(4){ text-indent: 4em; } </style> <script src="http://code.jquery.com/jquery-1.12.4.min.js"></script> </head> <body> <h1 id="a">林微因简介</h1> <div style="display: none" id="b"> <p>林徽因,女,汉族,原名林徽音,出生于浙江杭州,祖籍福建福州。中</p> <p>国著名建筑家、诗人、作家。人民英雄纪念碑和中华人民共和国国徽深化方</p> <p>案的设计者</p> <p>林徽因是建筑师梁思成的第一任妻子。三十年代初,与夫婿梁思成用现</p> <p>代科学方法研究方法研究中国古代建筑,成为这个学术领域的开拓者。</p> </div> <h1 id="d">主要作品</h1> <div style="display: none" id="c"> <p>《你是人间四月天》</p> <p>《宝莲灯》</p> <p>《九十九度中》</p> </div> <script> $(function () { $("#a").click(function () { $("#b").show(); }) $("#d").click(function () { $("#c").show(); }) }) </script> </body> </html>