javascript代码实例教程-AJAX jQuery tab选项卡

发布时间:2019-02-19 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-AJAX jQuery tab选项卡脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。 AJAX jQuery tab选项卡 @H_406_0@ 加载的是存在的页面,可以根据需要加载参数

 

演示

 

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>  

     

   <p class="clear"></p>  

     

   <p id="pageContent">  

   page1</p>  

     

   </p>  

   <p class="clear"></p>  

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!';  

?>  

 

 

觉得可用,就经常来吧! 脚本宝典 欢迎评论哦! js脚本,巧夺天工,精雕玉琢。小宝典献丑了!

脚本宝典总结

以上是脚本宝典为你收集整理的javascript代码实例教程-AJAX jQuery tab选项卡全部内容,希望文章能够帮你解决javascript代码实例教程-AJAX jQuery tab选项卡所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。