Question

我今天正在处理一个项目，并注意到我正在复制并粘贴很多内容，当涉及到导航部分工作时我想知道是否有办法将html导入到不同的html中文件，所以我不必继续复制和粘贴。我试图通过使用“链接”标记来解决这个问题。设置如下：

的index.html

<div> <link rel="import" href="nav.html"> </div>

nav.html

<a class="nav-link" href="reviews.html">Reviews</a>
<a class="nav-link" href="trending">Trending</a>
<a class="nav-link" href="contact">Contact</a>
<a class="nav-link" href="about">About</a>
<a class="nav-link" href="blog">Blog</a>

但是，我注意到这不起作用，我无法将nav.html内容导入index.html文件。因此，我不得不继续复制和粘贴。

如果您有解决方案，请告诉我。提前谢谢！

Answer 1

假设您没有可以使用的服务器应用程序，您可以使用一些简单的AJAX执行此操作 - 导航出现需要额外的瞬间，但它可以解决问题。

如果你有jQuery，它看起来像是：

每个页面都有：

<div id="navigation"></div>

您可以使用以下共享javascript文件（假设所有页面与导航页面处于同一级别）：

jQuery(document).ready(function() {
    jQuery.ajax({
        url: "nav.html"
        ,dataType: "html"
    }).done(function(result) {
        jQuery("#navigation").html(result);
    });
});

Answer 2

我不是很清楚......但你可以把你的菜单调到javascript文件的任何页面，如下所示：

function AddTheMenu(){
document.body.insertAdjacentHTML('afterEnd',
'<a class="nav-link" href="reviews.html">Reviews</a>'+
'<a class="nav-link" href="trending">Trending</a>'+
'<a class="nav-link" href="contact">Contact</a>'+
'<a class="nav-link" href="about">About</a>'+
'<a class="nav-link" href="blog">Blog</a>');
}

所以每个需要菜单的页面都会调用它：

AddTheMenu();

将HTML代码段导入其他文件

2 个答案: