我已经在我的网站上工作了一段时间了，随着时间的推移，我不断地为我的网站添加了许多部分，但是我一直在手动编辑每个页面，每当我添加一个新的按钮来重定向到一个新的部分，虽然这并不难或者花费太长时间，但我不确定这在长期运行中会有多好。
以下是相关的标题
有没有办法通过只更改一个文件来使这些元素在每个页面上保持一致？
这是我的HTML代码
<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>
这是CSS
.logocontainer {
text-align: center;
}
.logo {
display: inline-block;
margin-bottom: 10px;
}
.buttoncontainer {
text-align: center;
}
.button {
display: inline-block;
}
P粉0142181242023-09-09 11:36:15
你需要将你的菜单添加到menu.html页面中，然后通过jquery调用menu.html页面。
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>P粉0837850142023-09-09 10:07:27
你可以这样做：
<div id="buttoncontainer"> </div> <script src="./path-to/js/header.js"></script> // 在闭合的body标签之前添加
在你的header.js文件中，你可以这样做：
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);
在所有页面上调用它，一旦你在js文件中进行编辑，它将应用于所有页面的所有更改。