AJAX jQuery tab选项卡
2013-10-30 13:34
429 查看
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 Codevar 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.phpPHP 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
相关文章推荐
- jQuery中如何选取table中每行的除最后一个td以外的所有td?
- jQuery $.data()方法使用注意细节
- jquery easyui datagraid 对象显示的方法与datagraid、分页、复选框多选的数据显示
- jquery ajax php mysql 无刷新分页 demo
- jquery解析xml,获取xml标签名
- jQuery选择器总结
- jquery validator
- jquery ajax ie6兼容性问题
- jquery datagril
- jquery一些 事件的用法
- jquery设置元素的readonly和disabled
- jQuery实现公告文字左右滚动的实例代码
- JQuery中的change()方法
- W3School Jquery测验
- 操作CSS3过渡使用jQuery创建一个拖放文本效果
- 锋利的JQuery----JavaScript基础知识(二)
- 锋利的JQuery----JavaScript基础知识(一)
- jQuery数据缓存
- php处理序列化jQuery serializeArray数据
- Jquery选择器的使用