Question

首先，我想说我还在学习ajax / jquery所以，对不起，如果有任何愚蠢的错误。

好的，所以，我正在互联网上寻找一个解决方案来寻找我正在尝试做的事情。我在这里发现了一些东西，但是我正努力将所有东西放在一起。开始了。

<小时/>

目标

我想使用ajax导航创建一个网站。当我点击菜单时，只会更新content div。此外，我希望url更新，因此如果任何用户想要共享该页面，则可以。还有前进和后退的可能性（我认为这将在使用url更新时自动添加）。

<小时/>

我有什么

我做了网站，已经有了ajax导航。我也有一个active链接。导航工作正常。这是我正在使用的代码：

$(document).ready(function() {
    var content = $('#site'),
        firstLink = $(".navbar li:first-child a"),
        firstLoad = firstLink.attr("href"),
        navLink = $(".navbar li a");
    content.load(firstLoad); //default load
    navLink.on("click", function(event){
        event.preventDefault();
        $(".active").removeClass("active");
        $(this).addClass("active");
        content.load(this.href, function () {
            FB.XFBML.parse(); //update facebook page plugin in each page laod
        });
    });
});

这是我的导航栏：

[...rest of code...]
<nav class="navbar">
    <div class="container">
        <ul>
            <li><a class="active" href="content/home.php">Inicio</a></li>
            <li><a href="content/servicos.php">Serviços</a></li>
            <li><a href="content/advogados.php">Advogados</a></li>
            <li><a href="content/escritorio.php">Escritório</a></li>
            <li><a href="content/noticias.php">Notícias</a></li>
            <li><a href="content/contato.php">Contato</a></li>
        </ul>
    </div>
</nav>

<div id="site"></div>
[...rest of code...]

<小时/>

问题

在我看来，我有两个主要问题，即：

更新网址;
分享链接时，仅加载内容;

1-我试图使用history.js来做这件事。但每次我点击一个链接，它都会复制代码。例如，我有一个网址site.com/content/home.php，我点击了联系页面，网址为：site.com/content/content/contact.php，接下来将是site.com/content/content/content/about.php，依此类推..

2-当我尝试URL update我尝试共享链接时，例如，site.com/content/about.php但是当我打开新页面时，我只获得了about部分代码。没有标题，菜单，页脚和其他东西。

我尝试了什么

我正在寻找this topic，并遇到了我之前遇到的同样问题。即使有了修改。

这是我在关注该主题时使用的jquery代码：

$(document).ready(function() {
    var content = $('#site'),
        firstLink = $(".navbar li:first-child a"),
        firstLoad = firstLink.attr("href"),
        navLink = $(".navbar li a");

    content.load(firstLoad); //default load

    navLink.on("click", function(event){
        event.preventDefault();
        event.stopImmediatePropagation();
        var newLink = $(this).attr("href");

         History.pushState(null, newLink, newLink);

        $(".active").removeClass("active");
        $(this).addClass("active");
        content.load(newLink, function () {
            FB.XFBML.parse();
        });

    });

    History.Adapter.bind(window, "statechange", function() {
        $(".active").removeClass("active");
        $("a[href='" + History.getState().title + "']").addClass("active");
        content.load(document.location.href); 
    });
});

那么，有谁知道我做错了什么？有没有最好的方法来实现我想要的？或者怎么做？

希望有人可以帮助我。谢谢！

Answer 1

您的href是相对网址。把“/”放在“内容”之前！

[...rest of code...]
<nav class="navbar">
    <div class="container">
        <ul>
            <li><a class="active" href="/content/home.php">Inicio</a></li>
            <li><a href="/content/servicos.php">Serviços</a></li>
            <li><a href="/content/advogados.php">Advogados</a></li>
            <li><a href="/content/escritorio.php">Escritório</a></li>
            <li><a href="/content/noticias.php">Notícias</a></li>
            <li><a href="/content/contato.php">Contato</a></li>
        </ul>
    </div>
</nav>

<div id="site"></div>
[...rest of code...]

页面导航和使用ajax更新网址

目标

我有什么

问题

我尝试了什么

1 个答案: