Question

有没有人帮我解决这个问题，它在菜单上的链接上工作得很好，在div“内容”之前，但是当尝试浏览页面时，在div内部的链接称为“内容”，它确实有用吗？这是加载没有重新加载标题的页面。

$(function(){
    $("a[rel='tab']").click(function(e){
        //e.preventDefault(); 
        /*  
        if uncomment the above line, html5 nonsupported browers won't change the url but will display the ajax content;
        if commented, html5 nonsupported browers will reload the page to the specified link. 
        */

        //get the link location that was clicked
        pageurl = $(this).attr('href');

        //to get the ajax content and display in div with id 'content'
        $.ajax({url:pageurl+'?rel=tab',success: function(data){
            $('#content').html(data);
        }});

        //to change the browser URL to 'pageurl'
        if(pageurl!=window.location){
            window.history.pushState({path:pageurl},'',pageurl);    
        }
        return false;  
    });
});

/* the below code is to override back button to get the ajax content without reload*/
$(window).bind('popstate', function() {
    $.ajax({url:location.pathname+'?rel=tab',success: function(data){
        $('#content').html(data);
    }});
});

Answer 1

您应该处理使用ajax

加载的新锚点

$(function(){
    $("a[rel='tab']").click(clickhandler);
});
$(window).on('popstate', function() {
    $.ajax({url:location.pathname+'?rel=tab',success: function(data){
        $('#content').html(data);
        $("#content a[rel='tab']").click(clickhandler);
    }});
});

var clickhandler = function(e){
    pageurl = $(this).attr('href');
    $.ajax({url:pageurl+'?rel=tab',success: function(data){
        $('#content').html(data);
        $("#content a[rel='tab']").click(clickhandler);
    }});

    if(pageurl!=window.location){
        window.history.pushState({path:pageurl},'',pageurl);    
    }
    return false;  
};

html5历史api适用于所有链接，甚至内容div

1 个答案: