如何在另一個頁面 html 中包含 html 和 javascript？

Question

我有一個文件，它有一個導航欄並與另一個文件交互，如 css 和 javascript 文件。 我需要做的是將此代碼包含在另一個 html 頁面中，我不知道該怎么做。 我使用 nodejs 作為服務器端，作為前端我使用 w3.css 和 w3.js。 你能幫我嗎？？

<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<script src="https://www.w3schools.com/lib/w3.js"></script>
<script src="https://kit.fontawesome.com/a01ae3d94e.js" crossorigin="anonymous"></script>

<nav>//code<nav>

<script src="script.js"></script>

Answer 1

為抽屜式導航欄 navbar.html 創建單獨的文件

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

在您的索引中。html

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

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

在你的 script.js 添加這個

$(function() {

    $("#nav").load("navbar.html");

    function activeNav() {
        var pgurl = window.location.href.substr(window.location.href.lastIndexOf("/")+1);
         $("#nav ul li a").each(function(){
              if($(this).attr("href") == pgurl || $(this).attr("href") == '' )
              $(this).addClass("active");
         });
    }

    setTimeout(function() {
        activeNav();
    }, 100);

});

現在您可以將 script.js 文件導入其他 HTML 並讓 jquery 加載導航欄。 不要忘記在要包含導航欄代碼的文件中添加 id 作為導航，例如<div id="nav"></div> 。 參考答案