Saya telah mengusahakan tapak web saya buat sementara waktu sekarang dan lama kelamaan saya terus menambah banyak bahagian pada tapak web saya tetapi saya telah mengedit setiap halaman secara manual dan setiap kali saya menambah butang baharu untuk mengubah hala ke bahagian baharu, dan sementara ini tidak sukar atau mengambil masa terlalu lama, saya tidak pasti sejauh mana ini akan berfungsi dalam jangka masa panjang.
Berikut adalah tajuk berkaitan
Adakah terdapat cara untuk menjadikan elemen ini konsisten pada setiap halaman dengan menukar hanya satu fail?
Ini kod HTML saya
<div class="logocontainer">
<a href="index.html">
<img src="images/badasslogo.png" align="center" class="logo"></a>
</div>
<body>
<div class="buttoncontainer">
<a href="index.html">
<img src="images/buttons/homebutton.png" class="button"></a>
<a href="blog/blogmain.html">
<img src="images/buttons/blogbutton.png" class="button"></a>
<a href="art/artmain.html">
<img src="images/buttons/artbutton.png" class="button"></a>
<a href="fanart/fanartmain.html">
<img src="images/buttons/fanartbutton.png" class="button"></a>
<a href="partners/partnersmain.html">
<img src="images/buttons/partnersbutton.png" class="button"></a>
<a href="guestbook/guestbook.html">
<img src="images/buttons/guestbookbutton.png" class="button"></a>
<a href="servers/serversmain.html">
<img src="images/buttons/serversbutton.png" class="button"></a>
<a href="downloads/downloadsmain.html">
<img src="images/buttons/downloadsbutton.png" class="button"></a>
<a href="extras/extrasmain.html">
<img src="images/buttons/extrasbutton.png" class="button"></a>
<a href="donate/donatemain.html">
<img src="images/buttons/donatebutton.png" class="button"></a>
<a href="about/about.html">
<img src="images/buttons/aboutbutton.png" class="button"></a>
</div>
Ini CSS
.logocontainer {
text-align: center;
}
.logo {
display: inline-block;
margin-bottom: 10px;
}
.buttoncontainer {
text-align: center;
}
.button {
display: inline-block;
} 
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Anda perlu menambah menu anda pada halaman menu.html, dan kemudian memanggil halaman menu.html melalui jquery.
menu.html
<a href="index.html"> <img src="images/buttons/homebutton.png" class="button"></a> <a href="blog/blogmain.html"> <img src="images/buttons/blogbutton.png" class="button"></a> <a href="art/artmain.html"> <img src="images/buttons/artbutton.png" class="button"></a> <a href="fanart/fanartmain.html"> <img src="images/buttons/fanartbutton.png" class="button"></a> <a href="partners/partnersmain.html"> <img src="images/buttons/partnersbutton.png" class="button"></a> <a href="guestbook/guestbook.html"> <img src="images/buttons/guestbookbutton.png" class="button"></a> <a href="servers/serversmain.html"> <img src="images/buttons/serversbutton.png" class="button"></a> <a href="downloads/downloadsmain.html"> <img src="images/buttons/downloadsbutton.png" class="button"></a> <a href="extras/extrasmain.html"> <img src="images/buttons/extrasbutton.png" class="button"></a> <a href="donate/donatemain.html"> <img src="images/buttons/donatebutton.png" class="button"></a> <a href="about/about.html"> <img src="images/buttons/aboutbutton.png" class="button"></a>Index.html
<html> <head> <title>abc</title> <script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script> </head> <body> <div class="logocontainer"> <a href="index.html"> <img src="images/badasslogo.png" align="center" class="logo"></a> </div> <div class="buttoncontainer" id="buttoncontainer"> </div> <script> <!-- Call this script on all page--> $(document).ready(function () { $('#buttoncontainer').load('menu.html'); }); </script> </body> </html>Anda boleh melakukan ini:
Dalam fail header.js anda, anda boleh melakukan ini:
let headerContent = ` <a href="index.html"> <img src="images/buttons/homebutton.png" class="button"></a> <a href="blog/blogmain.html"> <img src="images/buttons/blogbutton.png" class="button"></a> <a href="art/artmain.html"> <img src="images/buttons/artbutton.png" class="button"></a> <a href="fanart/fanartmain.html"> <img src="images/buttons/fanartbutton.png" class="button"></a> <a href="partners/partnersmain.html"> <img src="images/buttons/partnersbutton.png" class="button"></a> <a href="guestbook/guestbook.html"> <img src="images/buttons/guestbookbutton.png" class="button"></a> <a href="servers/serversmain.html"> <img src="images/buttons/serversbutton.png" class="button"></a> <a href="downloads/downloadsmain.html"> <img src="images/buttons/downloadsbutton.png" class="button"></a> <a href="extras/extrasmain.html"> <img src="images/buttons/extrasbutton.png" class="button"></a> <a href="donate/donatemain.html"> <img src="images/buttons/donatebutton.png" class="button"></a> <a href="about/about.html"> <img src="images/buttons/aboutbutton.png" class="button"></a> `; document.querySelector('#buttoncontainer').insertAdjacentHTML('beforeend', headerContent);Panggilnya pada semua halaman dan sebaik sahaja anda membuat pengeditan dalam fail js, ia akan digunakan untuk semua perubahan pada semua halaman.