首页>>TAB标签>>AJAX jQuery tab选项卡(2013-10-26)

AJAX jQuery tab选项卡

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

AJAX jQuery tab选项卡
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

XML/HTML Code
  1. <ul id="navigation">  
  2.    <li><a href="#page1">asp</a></li>  
  3.    <li><a href="#page2">php</a></li>  
  4.    <li><a href="#page3">html</a></li>  
  5.    <li><a href="#page4">js</a></li>  
  6.    <li><img id="loading" src="img/ajax_load.gif" alt="loading" /></li>  
  7.    </ul>  
  8.      
  9.    <div class="clear"></div>  
  10.      
  11.    <div id="pageContent">  
  12.    page1</div>  
  13.      
  14.    </div>  
  15.    <div class="clear"></div>  
JavaScript Code
  1. var default_content="";  
  2.   
  3. $(document).ready(function(){  
  4.       
  5.     checkURL();  
  6.     $('ul li a').click(function (e){  
  7.   
  8.             checkURL(this.hash);  
  9.   
  10.     });  
  11.       
  12.     //filling in the default content  
  13.     default_content = $('#pageContent').html();  
  14.       
  15.       
  16.     setInterval("checkURL()",250);  
  17.       
  18. });  
  19.   
  20. var lasturl="";  
  21.   
  22. function checkURL(hash)  
  23. {  
  24.     if(!hash) hash=window.location.hash;  
  25.       
  26.     if(hash != lasturl)  
  27.     {  
  28.         lasturl=hash;  
  29.           
  30.         // FIX - if we've used the history buttons to return to the homepage,  
  31.         // fill the pageContent with the default_content  
  32.           
  33.         if(hash=="")  
  34.         $('#pageContent').html(default_content); 
  35.          
  36.         else 
  37.         loadPage(hash); 
  38.     } 
  39. } 
  40.  
  41.  
  42. function loadPage(url) 
  43. { 
  44.     url=url.replace('#page',''); 
  45.      
  46.     $('#loading').css('visibility','visible'); 
  47.      
  48.     $.ajax({ 
  49.         type: "POST", 
  50.         url: "load_page.php", 
  51.         data: 'page='+url, 
  52.         dataType: "html", 
  53.         success: function(msg){ 
  54.              
  55.             if(parseInt(msg)!=0) 
  56.             { 
  57.                 $('#pageContent').html(msg); 
  58.                 $('#loading').css('visibility','hidden');  
  59.             }  
  60.         }  
  61.           
  62.     });  
  63.   
  64. }  

 load_page.php

PHP Code
  1. <?php  
  2.   
  3. if(!$_POST['page']) die("0");  
  4.   
  5. $page = (int)$_POST['page'];  
  6.   
  7. if(file_exists('pages/page_'.$page.'.html'))  
  8. echo file_get_contents('pages/page_'.$page.'.html');  
  9.   
  10. else echo 'There is no such page!';  
  11. ?>  

 


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