AJAX jQuery tab选项卡

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

XML/HTML Code
<ul id="navigation">  
   <li><a href="#page1">asp</a></li>  
   <li><a href="#page2">php</a></li>  
   <li><a href="#page3">html</a></li>  
   <li><a href="#page4">js</a></li>  
   <li><img id="loading" src="img/ajax_load.gif" alt="loading" /></li>  
   </ul>  
     
   <div class="clear"></div>  
     
   <div id="pageContent">  
   page1</div>  
     
   </div>  
   <div class="clear"></div>  

JavaScript Code
var default_content="";  
  
$(document).ready(function(){  
      
    checkURL();  
    $('ul li a').click(function (e){  
  
            checkURL(this.hash);  
  
    });  
      
    //filling in the default content  
    default_content = $('#pageContent').html();  
      
      
    setInterval("checkURL()",250);  
      
});  
  
var lasturl="";  
  
function checkURL(hash)  
{  
    if(!hash) hash=window.location.hash;  
      
    if(hash != lasturl)  
    {  
        lasturl=hash;  
          
        // FIX - if we've used the history buttons to return to the homepage,  
        // fill the pageContent with the default_content  
          
        if(hash=="")  
        $('#pageContent').html(default_content); 
         
        else 
        loadPage(hash); 
    } 
} 
 
 
function loadPage(url) 
{ 
    url=url.replace('#page',''); 
     
    $('#loading').css('visibility','visible'); 
     
    $.ajax({ 
        type: "POST", 
        url: "load_page.php", 
        data: 'page='+url, 
        dataType: "html", 
        success: function(msg){ 
             
            if(parseInt(msg)!=0) 
            { 
                $('#pageContent').html(msg); 
                $('#loading').css('visibility','hidden');  
            }  
        }  
          
    });  
  
}  

load_page.php

PHP Code
<?php  
  
if(!$_POST['page']) die("0");  
  
$page = (int)$_POST['page'];  
  
if(file_exists('pages/page_'.$page.'.html'))  
echo file_get_contents('pages/page_'.$page.'.html');  
  
else echo 'There is no such page!';  
?>  

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

AJAX jQuery tab选项卡

AJAX jQuery tab选项卡

相关推荐