这是我的HTML代码:
<body onload="fun1()">
<ul id="nav" class="nav" style="font-size:12px;">
<li><a href="#" id="m_blink" onclick="fun1()">Tab1</a></li>
<li><a href="#" id="d_blink" onclick="fun2()">Tab2</a></li>
<li><a href="#" id="k_blink" onclick="fun3()">Tab3</a></li>
</ul>
</body>
<div id='home'></div>
这个脚本将页面内容加载到“家庭”中。 div,如果我点击&tab; tab1&#39;特别&#39; tab1.php&#39;装入&#39; home&#39; div,当我点击“tab2&#39;特别是tab2.php正在加载&#39; home&#39; div和当我点击tab3特定tab3.php正在加载家庭div,
<script>
function fun1(){
$("#home").load("tab1.php",{},function(){});
}
function fun2(){
$("#home").load("tab2.php",{},function(){});
}
function fun3(){
$("#home").load("tab3.php",{},function(){});
}
</script>
当我点击tab1页面加载到home div时,当home2页面加载到home div时,此home div必须每5秒刷新一次,并且此home div必须刷新5秒并且与tab3相同
请检查&#39; onload&#39;功能是用于身体标签!
我尝试使用setInterval(function(){});像这样:
function fun1(){
setInterval(function(){
$("#home").load("tab1.php",{},function(){});
},5000);
}
function fun2(){
setInterval(function(){
$("#home").load("tab2.php",{},function(){});
},5000);
}
function fun3(){
setInterval(function(){
$("#home").load("tab3.php",{},function(){});
},5000);
}
问题是当我通过ajax load()函数调用页面而不是页面的整个主体正在加载时,所以我不想加载整个页面我只想刷新特定div home div的页面,请建议如何解决这个问题。
请检查我用来调用默认页面tab1.php
的onload()函数答案 0 :(得分:2)
我会像这样组织代码:
<body>
<ul id="nav" class="nav" style="font-size:12px;">
<li><a href="tab1.php" id="m_blink" class="selected">Tab1</a></li>
<li><a href="tab2.php" id="d_blink">Tab2</a></li>
<li><a href="tab3.php" id="k_blink">Tab3</a></li>
</ul>
</body>
<div id='home'></div>
JavaScript的:
jQuery(function($) {
var $current,
timer;
// change current tab based on given anchor
function changeTab($element)
{
if (timer) {
clearInterval(timer); // clear old timer
}
$current = $element;
// set new timer
timer = setInterval(function() {
refreshCurrentTab();
}, 5000);
// and call immediately
refreshCurrentTab();
}
function refreshCurrentTab()
{
$('#home').load($current.prop('href'));
}
$('#nav').on('click', 'a', function(e) {
e.preventDefault();
changeTab($(this));
});
changeTab($('#nav .selected')); // initial tab
});
答案 1 :(得分:0)
这样的事情
<强>的javascript 强>
$(function(){
//adding click event
$('#nav li a').click(function(){
var url = this.id + '.php';
$("#home").load(url,{},function(){
// store your page id which is currently loaded with data attribute on #home element
$("#home").data('current_page',this.id);
});
})
// auto refresh function
setInterval(function(){
// retrieve page if which is currently loaded with data attribute on #home element
var current_page = $("#home").data('current_page');
var url= current_page + '.php';
$("#home").load(url);
},5000);
});
<强> HTML 强>
<body>
<ul id="nav" class="nav" style="font-size:12px;">
<li><a href="#" id="tab1">Tab1</a></li>
<li><a href="#" id="tab2">Tab2</a></li>
<li><a href="#" id="tab3">Tab3</a></li>
</ul>
<div id='home' data-current_page='tab1'> </div>
</body>
已编辑 [根据您的代码]
<强>的javascript 强>
//default page
var page = 'tab1.php';
function fun1(){
page = "tab1.php";
$("#home").load("tab1.php",{},function(){});
}
function fun2(){
page = "tab2.php";
$("#home").load("tab2.php",{},function(){});
}
function fun3(){
page = "tab3.php";
$("#home").load("tab3.php",{},function(){});
}
function autorefresh(){
setInterval(function(){
$("#home").load(page,{},function(){});
},5000);
}
<强> HTML 强>
<body onload="autorefresh()">
<ul id="nav" class="nav" style="font-size:12px;">
<li><a href="#" id="m_blink" onclick="fun1()">Tab1</a></li>
<li><a href="#" id="d_blink" onclick="fun2()">Tab2</a></li>
<li><a href="#" id="k_blink" onclick="fun3()">Tab3</a></li>
</ul>
<div id='home'></div>
答案 2 :(得分:0)
我建议你使用jQuery的.data()
方法来提供所需的额外信息:
<ul id="nav" class="nav" style="font-size:12px;">
<li><a href="#" data-url="tab1.php">Tab1</a></li>
<li><a href="#" data-url="tab2.php">Tab2</a></li>
<li><a href="#" data-url="tab3.php">Tab3</a></li>
</ul>
当你使用jQuery时,最好使用不引人注目的方式编写这样的脚本:
$('#nav a').on('click', function(e){
e.preventDefault();
$('.active').removeClass('active'); // removes the active class from other link
$(this).addClass('active'); // adds the active class to current cliked link
setInterval(function(){
$("#home").load($('.active').data('url'),{},function(){}); // populates the div with data-url of active class.
}, 5000);
});
$('#nav li:eq(0) a').trigger('click'); // triggers the first link's click.
答案 3 :(得分:0)
这是您所要求的非常简单的实施方式。包含注释,因此您应该能够完成注释。
另外,您可以使用setInterval()
函数轻松将其更新为自动更新:
test.php 单页演示
<?php
// Dummy Ajax Handler
if (!empty($_GET['load']))
{
switch ($_GET['load'])
{
case 'tab1':
echo "hello from tab 1";
break;
case 'tab2':
echo "hello from tab 2";
break;
case 'tab3':
echo "hello from tab 3";
break;
}
exit();
}
?>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
// When Page Loads
$(function()
{
// Load Tab 1 By Default
$('#home').load('test.php?load=tab1');
// Handle Nav Clicks
$('#nav li a').click(function()
{
// Load Requested Tab
$('#home').load('test.php?load=tab' + $(this).attr('data-tab'));
});
});
</script>
<ul id="nav" class="nav" style="font-size:12px;">
<li><a href="#" data-tab="1" id="m_blink">Tab1</a></li>
<li><a href="#" data-tab="2" id="d_blink">Tab2</a></li>
<li><a href="#" data-tab="3" id="k_blink">Tab3</a></li>
</ul>
<div id="home"></div>
答案 4 :(得分:0)
在html中,我删除了你在那里的所有javascript。将html代码与javascript代码混合起来并不好,这是不太容易理解的。
<body>
<ul id="nav" class="nav" style="font-size:12px;">
<li><a href="#" id="m_blink">Tab1</a></li>
<li><a href="#" id="d_blink">Tab2</a></li>
<li><a href="#" id="k_blink">Tab3</a></li>
</ul>
</body>
<div id='home'></div>
在javascript中:
// First we need to make onload, that we removed from html.
// So I make a function and bind it to window.onload, which is almost same as
// <body onload="bla()">
// Everything inside the function will then happen after html is loaded
// in browser, which is very important, because we cant manipulate with
// elements that doesn't exist yet.
window.onload = function() {
// there we need to put all code
};
现在让我们进行一些切换。做任何事情都不要先刷新。我们有3个标签,因此我们需要在家中制作新内容:
// first we need to add event onclick to our <a>
$("#m_blink").onclick(function() { });
$("#d_blink").onclick(function() { });
$("#k_blink").onclick(function() { });
// now add what should happen when you click on <a>
$("#m_blink").onclick(function() {
$("#home").load("tab1.php",{},function(){});
});
$("#d_blink").onclick(function() {
$("#home").load("tab2.php",{},function(){});
});
$("#k_blink").onclick(function() {
$("#home").load("tab3.php",{},function(){});
});
现在setInterval
函数很容易编写。
两个参数,首先是你要调用的函数,第二个是以毫秒为单位的时间。
setInterval(function(){
// do something
}, 5*1000);
所以现在首先只是做setInterval并将ajax放在里面,就像那样:
setInterval(function(){
$("#home").load("tab1.php",{},function(){});
}, 5*1000);
但问题是,一旦用户切换标签,那么5秒后,间隔将再次从tab1加载数据!我们如何解决问题,轻松。我们将使用变量currentTable
来保存表用户看到的状态。对于每个表格切换,我们将更改currentTable
。此外,我们将在setInterval中使用currentTable
,因此函数将始终执行我们想要的操作。
现在再次从头开始,完成js代码:
window.onload = function() {
var currentTable = "tab1.php"; // this is our initial state
// now I define function reloadTab, because we do that all the time
// and it is boring to write same code again and again
function reloadTab() {
$("#home").load(currentTable,{},function(){});
}
// onclicks - it is so easy now, we just change tab and call realoadTab
$("#m_blink").onclick(function() {
currentTable = "tab1.php";
reloadTab();
});
$("#m_blink").onclick(function() {
currentTable = "tab2.php";
reloadTab();
});
$("#m_blink").onclick(function() {
currentTable = "tab3.php";
reloadTab();
});
// setInterval - all we need is use reloadTab as first param
setInterval(reloadTab, 5*1000);
}; // end of window.onload
就是这样,你需要的所有javascript都是最后一部分。