AJAX jQuery tab选项卡

前端之家收集整理的这篇文章主要介绍了AJAX jQuery tab选项卡前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

AJAX jQuery tab选项卡

加载的是存在的页面,可以根据需要加载参数

XML/HTML Code
  1. <ulid="navigation">
  2. li><ahref="#page1">asp</a></li>
  3. ahref="#page2">PHP</li>
  4. ahref="#page3">html</ahref="#page4">js</imgid="loading"src="img/ajax_load.gif"alt="loading"/></</ul>
  5. divclass="clear"></div>
  6. divid="pageContent">
  7. page1</div>
  8. div>
JavaScript Code
    vardefault_content="";
  1. $(document).ready(function(){
  2. checkURL();
  3. $('ullia').click(function(e){
  4. checkURL(this.hash);
  5. });
  6. //fillinginthedefaultcontent
  7. default_content=$('#pageContent').html();
  8. setInterval("checkURL()",250);
  9. varlasturl="";
  10. functioncheckURL(hash)
  11. {
  12. if(!hash)hash=window.location.hash;
  13. if(hash!=lasturl)
  14. lasturl=hash;
  15. //FIX-ifwe'veusedthehistorybuttonstoreturntothehomepage,
  16. //fillthepageContentwiththedefault_content
  17. if(hash=="")
  18. $('#pageContent').html(default_content);
  19. else
  20. loadPage(hash);
  21. }
  22. }
  23. functionloadPage(url)
  24. {
  25. url=url.replace('#page','');
  26. $('#loading').css('visibility','visible');
  27. $.ajax({
  28. type:"POST",
  29. url:"load_page.PHP",
  30. data:'page='+url,0);">dataType:"html",0);">success:function(msg){
  31. if(parseInt(msg)!=0)
  32. {
  33. $('#pageContent').html(msg);
  34. hidden');
  35. }
  36. }
  37. }

load_page.PHP

PHP Code
    <?PHP
  1. if(!$_POST['page'])die("0");
  2. $page=(int)$_POST['page'];
  3. if(file_exists('pages/page_'.$page.'.html'))
  4. echofile_get_contents('pages/page_'.$page.'.html');
  5. elseecho'Thereisnosuchpage!';
  6. ?>


原文地址:http://www.freejs.net/article_tabbiaoqian_71.html

原文链接:https://www.f2er.com/ajax/165669.html

猜你在找的Ajax相关文章