gpt4 book ai didi

javascript - 如何在网站中重复使用重复的 HTML?

转载 作者:行者123 更新时间:2023-11-28 04:32:50 27 4
gpt4 key购买 nike

我为我的网站创建了一个主菜单(html和css),每次编辑菜单时将其复制/粘贴到网站的每个文件/页面中是荒谬的,我需要它自动出现在每个文件/页面上单个文件。

如何在我的网站中重复使用/包含此主菜单?

我已经尝试过使用 jquery 和 ajax 进行一些操作,但没有成功。我最后尝试的是这样的:

function loadDoc() { 
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("#").innerHTML = this.responseText;
}
};
xhttp.open("GET", "my_file_menu.html", true);
xhttp.send();
}

最佳答案

您始终可以使用 AJAX/fetch 加载文件,并在加载后使用 DOM 操作将其添加到文档中。但我猜您可能只想使用一个简单的库来完成此操作。

看看w3.js and the w3.includeHtml() function 。它使用起来非常简单,不需要学习模板或 View 框架,例如 react 。这是一个例子:

main-page.html

<!DOCTYPE html>
<html>
<script src="https://www.w3schools.com/lib/w3.js"></script>
<body>
<div w3-include-html="main-menu.html"></div>
<script>
w3.includeHTML();
</script>
</body>
</html>

main-page.html

<ul>
<li><a href='home'>Home</a></li>
<li><a href='contact'>Contact Us</a></li>
</ul>

关于javascript - 如何在网站中重复使用重复的 HTML?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44479569/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com