使用 Bootstrap 5：如何在沒有 jQuery 的情況下跨多個 HTML 頁面創建可重用的導航欄？
（如果可能的話，我更喜歡嚴格的 JavaScript 方式。并不是真的想在我的專案中引入 JavaScript 框架。）
Layout:
./index.html
./about.html
./crew.html
./flights.html
./events.html
我希望每個頁面都具有相同的導航欄，這樣我就不必在每次鏈接順序更改時重復自己并修復每個頁面。
這是我的示例導航欄：
<nav class="navbar navbar-expand-xl navbar-light">
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#toggleMobileMenu"
aria-controls="toggleMobileMenu"
aria-expanded="true"
aria-label="Toggle Navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse show" id="toggleMobileMenu">
<ul class="navbar-nav mx-auto">
<li class="nav-item text-center">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item text-center">
<a class="nav-link" href="about.html">About</a>
</li>
<li class="nav-item text-center">
<a class="nav-link" href="crew.html">Crew</a>
</li>
<li class="nav-item text-center">
<a class="nav-link" href="flights.html">Flights</a>
</li>
<li class="nav-item text-center">
<a class="nav-link" href="events.html">Events</a>
</li>
</ul>
</div>
</nav>
uj5u.com熱心網友回復：
根據您需要什么樣的瀏覽器支持，您可以使用模板文字（反引號）來定義您的導航。然后使用 insertAdjacentHTML 將其放置在所有 html 頁面上您需要的位置。如果您的頁面相當簡單，您可以在 body 標簽的 begin 后插入導航。
const navigation = `
<nav >
<button
type="button"
data-bs-toggle="collapse"
data-bs-target="#toggleMobileMenu"
aria-controls="toggleMobileMenu"
aria-expanded="true"
aria-label="Toggle Navigation"
>
<span ></span>
</button>
<div id="toggleMobileMenu">
<ul >
<li >
<a href="index.html">Home</a>
</li>
<li >
<a href="about.html">About</a>
</li>
<li >
<a href="crew.html">Crew</a>
</li>
<li >
<a href="flights.html">Flights</a>
</li>
<li >
<a href="events.html">Events</a>
</li>
</ul>
</div>
</nav>
`
document.getElementById("nav-container").insertAdjacentHTML('afterbegin', navigation);<div id="nav-container"></div>轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/334962.html