如何链接到新页面并使用ajax加载div？

我有一个主要登录页面，左侧是过滤器导航，右侧是不同文章类型的列表。当用户点击文章时，他们会转到新的着陆页面，但我在左侧有一个过滤器导航副本，以便他们可以单击新的过滤器以返回到带有修订列表的主页面，或者文章。如何链接到新页面并使用ajax加载div？

我的HTML看起来像：

<li><a href="#internet-nav" id="internet-nav-articles">Internet Articles</a></li>

我的内容应加载：

<div id="#insights-div-articles"> </div>

和我的JavaScript看起来像：

$(document).ready(function(){ 
$(".-categories a").on("click", function(e) { 
    e.preventDefault(); 
}); 
$("#internet-nav-articles").on("click", function(){ 
    $(window.location = '/insights-and-news/internet-articles/').load("insights-category-divs/internet-articles-tab #insights-div-articles"); 
}); 

});

预先感谢您的任何帮助，我敢肯定，我的JavaScript是关闭的，只是试图学习

来源

2016-12-13 Robert

你从哪里学到了'$（window.location = ...'语法？当你在这种情况下将jquery和html dom元素混合使用时，你期望什么？ – JOUM

为什么你不使用普通链接你试图做一个window.location） – Jeff

我试图链接到一个新的页面，但加载的东西不同于什么是加载在div的默认值。例如，默认情况下，我加载内容来自'/ insights-category-divs/all-categories-tab' in'

'，但是如果用户点击文章着陆页的不同过滤器，我希望它从'insights-category-divs/internet- articles-tab' – Robert

我结束了使用从上述评论的参数建议。有可能是一个更清洁的方式做到这一点，但我的最终代码如下所示：

例如，用户点击http://www.example.com/#filter=internet

$(document).ready(function(){ 

var url = window.location.href; 
var insightfilter = url.split('#')[1].split('='); 
insightfilter.shift(); 

if (insightfilter == 'internet') { 
    $.get("/insights-category-divs/internet-articles-tab", function(data) { 
    $("#insights-div-articles").html(data); 

    $('.-categories a').removeClass('-active'); 
    $('#internet-insights-link-articles').addClass('-active'); 
    history.pushState("", document.title, window.location.pathname); 
    }); 
} 

});

的removeClass和addClass是设置正确的过滤器所强调的打算时，回到主页面。如果用户切换到主着陆页上的其他过滤器，那么history.pushState会从网址中删除#whatever。

来源

2016-12-15 06:16:56 Robert

我认为你要找的是history API。它看起来像你想加载新的内容，以及更改栏中的网址。你可以做到这一点的东西，如：

history.pushState(data, "page 2", "bar.html");

请参阅以下资源：

来源

2016-12-13 23:53:40

如何链接到新页面并使用ajax加载div？

回答

相关问题