首页>>TAB标签>>tab标签页面,ajax载入(2013-09-04)

tab标签页面,ajax载入

 tab标签，jquery ajax载入数据库的内容

数据库只要2个字段，id和message

 

tab标签页面,ajax载入
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 js文件

 

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. }  

html主要内容

XML/HTML Code复制内容到剪贴板
  1. <div id="main" class="container">   
  2.     <ul id="navigation">  
  3.     <li><a href="#1">Page 1</a></li>  
  4.     <li><a href="#2">Page 2</a></li>  
  5.     <li><a href="#3">Page 3</a></li>  
  6.     <li><a href="#4">Page 4</a></li>  
  7.     <li><img id="loading" src="img/ajax_load.gif" alt="loading" /></li>  
  8.     </ul>  
  9.       
  10.     <div class="clear"></div>  
  11.       
  12.     <div id="pageContent">  
  13.     这个是来自于<a href="http://www.freejs.net/article_tabbiaoqian_17.html">www.freejs.net</a>的测试代码,现在显示的并不是第一页而是默认内容</div>  
  14.       
  15.     </div>  
  16.     <div class="clear"></div>  

load_page.php

 

PHP Code复制内容到剪贴板
  1. <?php  
  2. include_once("conn.php");  
  3.   
  4. $id =$_POST['page'];  
  5. $id=str_replace("#","",$id);  
  6.   
  7. $sql = "select * from content where id='$id'";  
  8. $result = mysql_query( $sql );  
  9. $res_now = mysql_fetch_array($result);//不能用mysql_fetch_row  
  10. echo $res_now['message'];  
  11.   
  12. ?>  

 


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