Question

假设我有index.php将page.php加载到“div”类的wrapper。

page.php反过来有自己的链接，我想要它，以便当您点击其中一个链接时，它会将相应的页面加载到相同的“wrapper”div中。

同样，加载的页面可能有自己的链接，我想继续将内容加载到同一个div中。我怎样才能实现页面的这种链效应？

Answer 1

jQuery / AJAX是你的朋友：

$('#link').click(function() {
        var go = $.ajax({
            type: 'POST',
            data: {m: 'ajax', // POST Variables go here...
                linkID: $(this).val()} // $(this).val() is the value of the link clicked
        })
        .done(function(results) {
            $('#resultsDiv').html(results); // This is where your results go
        })
        .fail(function(msg) {
            alert("Error:" + msg);
        })
        .always(function() {
        });
    }

Answer 2

我会把AJAX调用放到一个函数中：

function loadWrapper($url){
    $('#wrapper').load($url+' > *',function(){
        $(this).on('click','a',function(e){
            e.preventDefault();
            loadWrapper($(this).attr('href'));
        });
    });
}

然后在页面加载时将点击分配给最初加载的页面上的任何项目：

$('.LinkClass').on('click',function(e){
    e.preventDefault();
    loadWrapper($(this).attr('href'));
});

当然，还有你原来的负担：

loadWrapper('page.php');

该函数中的回调将允许点击事件在已加载的链接上触发，以及您将来要添加到.Wrapper中的任何其他链接。只要给这些链接LinkClass（或任何你想要的），你就可以了。

Answer 3

使用jQuery：

var activateLinks = function() {
    $('.wrapper a[href]').click(function(){
        $('.wrapper').load($(this).attr('href'), activateLinks);
        return false;
    });
}

$('.wrapper').load('page.php', activateLinks);

或者

$('.wrapper').on('click', 'a[href]', function() {
    $('.wrapper').load($(this).attr('href');
    return false;
}
$('.wrapper').load('page.php');

Answer 4

使用委托是最好的，这样你就不必为新页面上的链接运行处理程序获取。它们会自动处理。

$(document).on('click', 'div.wrapper a[href]', 'click', function (e) {
    e.preventDefault();
    $.get($(this).attr('href'), function (html) {
       $('div.wrapper').html(html);
    });
});

通过AJAX将PHP文件加载到DIV中

4 个答案: