Question

这是我的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（）函数

Answer 1

我会像这样组织代码：

<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
});

Answer 2

这样的事情

<强>的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>

Answer 3

我建议你使用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.

Answer 4

这是您所要求的非常简单的实施方式。包含注释，因此您应该能够完成注释。

另外，您可以使用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>

Answer 5

在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都是最后一部分。

如何通过ajax load（）函数加载页面时刷新特定的div内容

5 个答案: