Question

我正在使用jQuery导入外部html文件：

$("#header").load("header.html");

$("#content").load("home.html");

$("#footer").load("footer.html");

和html：

<html>
    ...
    <body>

        <div id="header"></div>

        <div id="content"></div>

        <div id="footer"></div>


    </body>
</html>

我希望能够做到的还有：

导入导航：

$（ “＃HAV”）负载（ “nav.html”）;

分为：

<div id="nav"></div>

所以我会：

<html>
    ...
    <body>

        <div id="header"></div>
        <div id="nav"></div>

        <div id="content"></div>

        <div id="footer"></div>


    </body>
</html>

导航导入如下所示：

<ul>
  <li><a href="home.html">Home</a></li>
  <li><a href="about.html">About</a></li>
  <li><a href="contact.html">Contact</a></li>
</ul>

现在，这是困难的部分......

我需要导航中的页面在内容区域中打开，但我需要页眉和页脚保持加载状态，并且只需要更改内容区域。

如果没有iframe或angular（我知道angular可以做到这一点），我怎么能这样做。

Answer 1

我还没有对此进行过测试，但这是可行的方法。

$('#nav').on('click', 'li a', function(evt) {
  evt.preventDefault();
  var href = $(this).attr('href');
  $('#content').load(href);
});

侦听器仅添加到#nav，因为该元素在构建侦听器时存在，但它实际上正在侦听子节点的任何冒泡元素，以适合选择器。

preventDefault()旨在防止定期导航发生。如果这不起作用，您可以尝试相同的外观链接。（例如，<span class="linkLike" data-href="about.html">About</span>）

Javascript csi和导航（没有iframes）

1 个答案: