个人中心
gpt4 book ai didi

Javascript csi 和导航(无 iframe)

转载 作者：行者123 更新时间：2023-11-27 22:53:03 26 4
gpt4 key购买 nike

我正在使用 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").load("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 可以做到这一点)。

最佳答案

我还没有对此进行测试，但这是一种可能有效的方法。

$('#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 和导航(无 iframe)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37890420/

26 4 0
文章推荐： javascript - 在 JavaScript 中向与给定数据集匹配的所有元素添加类
文章推荐： javascript - 从 json 响应创建列表菜单
文章推荐： javascript - 试图将数据存储在答题器网站中
文章推荐： javascript - react 悬停以显示图像。悬停不起作用
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com