jquery ajax tab简单网页选项卡切换
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 |
<!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 ajax tab选项卡制作简单网页模板单页选项卡切换</title> <meta name="description" content="jquery ajax tab选项卡通过鼠标点击导航条标签选项卡滑动切换，内容异步加载选项卡切换。简单的网页模板单页选项卡切换展示。" /> <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> <style type="text/css"> @import url(style.css); </style> <script type="text/javascript"> $(document).ready(function() { var hash = window.location.hash.substr(1); var href = $('#nav li a').each(function(){ var href = $(this).attr('href'); if(hash==href.substr(0,href.length-5)){ var toLoad = hash+'.html #content'; $('#content').load(toLoad) } }); $('#nav li a').click(function(){ var toLoad = $(this).attr('href')+' #content'; $('#content').hide('fast',loadContent); $('#load').remove(); $('#wrapper').append('<span id="load">LOADING...</span>'); $('#load').fadeIn('normal'); window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5); function loadContent() { $('#content').load(toLoad,'',showNewContent()) } function showNewContent() { $('#content').show('normal',hideLoader()); } function hideLoader() { $('#load').fadeOut('normal'); } return false; }); }); </script> </head> <body> <div id="wrapper"> <h1>jquery ajax tab选项卡制作简单网页模板单页选项卡切换</h1> <ul id="nav"> <li><a href="index.html">欢迎访问</a></li> <li><a href="about.html">关于我们</a></li> <li><a href="portfolio.html">投资组合</a></li> <li><a href="contact.html">联系我们</a></li> <li><a href="terms.html">条款</a></li> </ul> <div id="content"> <h2>欢迎访问!</h2> <p>您好， - “如何载入和动画内容与jQuery”</p> <p>在本教程中，我们将采取平均每天网站，并加强与jQuery。我们将添加AJAX功能，使有关的容器，而不是用户的内容加载到导航到另一个页面。我们也将整合一些真棒效应...</p> </div> </div> </body> </html> |
百度网盘下载地址:http://pan.baidu.com/s/1sjyenFJ
请尊重我们的辛苦付出，未经允许，请不要转载 本站 的文章，鄙视各种无耻的采集行为！