|
|
|
<!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>jQuery Playground</title><link title="green" media="screen" href="css/green.css" type="text/css" rel="stylesheet" /><script type="text/javascript" src="js/jquery.js"></script><script type="text/javascript"> $(document).ready(function(){// hides all DIVs with the CLASS container// and displays the one with the ID 'home' only$(".container").css("display","none");$("#home").css("display","block");// makes the navigation work after all containers have bee hidden showViaLink($("ul#nav li a"));// listens for any navigation keypress activity $(document).keypress(function(e){switch(e.which){// user presses the "a"case 97:showViaKeypress("#home");break;// user presses the "s" keycase 115:showViaKeypress("#about");break;// user presses the "d" keycase 100:showViaKeypress("#contact");break;// user presses the "f" key case 102:showViaKeypress("#links");} }); }); // shows a given element and hides all others function showViaKeypress(element_id){ $(".container").css("display","none"); // if multiple keys are pressed rapidly this will hide all but the last pressed key's div $(".container").hide(1); $(element_id).slideDown("slow"); } // shows proper DIV depending on link 'href' function showViaLink(array){ array.each(function(i) { $(this).click(function(){var target = $(this).attr("href");$(".container").css("display","none");$(target).slideDown("slow");}); }); }</script></head><body><div id="wrapper"><h1>jQuery Playground</h1><ul id="nav"><li><a href="#home">主页(a)</a></li><li><a href="#about">介绍(s)</a></li><li><a href="#contact">联系(d)</a></li><li><a href="#links">链接(f)</a></li></ul><div id="home" class="container"><h2>主页</h2><input type="text" /><br/></div><div id="about" class="container"><h2>介绍</h2></div><div id="contact" class="container"><h2>联系</h2></div><div id="links" class="container"><h2>链接</h2></div><div id="foot">Powered By Dennis Ji.</div></div></body></html> |
|
京ICP备14020293号-2
本网站内容均收集于互联网，如有问题请联系QQ:389897944予以删除
窥视卡
雷达卡
楼主
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡