Question

我有一个主要登录页面，左侧是过滤器导航，右侧是不同文章类型的列表。当用户点击文章时，他们会转到新的目标网页，但我在左侧有一个该过滤器导航的副本，这样他们就可以点击新的过滤器返回主页并修改列表或文章。

我的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已关闭，只是想学习

Answer 1

我认为您正在寻找的是history API。看起来您想要加载新内容以及更改栏中的URL。你可以用以下的东西来做到这一点：

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

请参阅以下资源：

Answer 2

我最终使用了上述评论中的参数建议。可能有一种更简洁的方法，但我的最终代码如下：

例如，用户点击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。

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

2 个答案: