简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
首頁
文章
問答
課程
專題
下載
遊戲
詞典
最近更新

首頁  >  問答  >  主體

保持頁面元素一致性：確保標題或標誌在不同頁間保持一致

我已經在我的網站上工作了一段時間了，隨著時間的推移，我不斷地為我的網站添加了許多部分，但是我一直在手動編輯每個頁面，每當我添加一個新的按鈕來重定向到一個新的部分，雖然這並不難或花費太長時間，但我不確定這在長期運行中會有多好。

以下是相關的標題

有沒有辦法透過只更改一個檔案來使這些元素在每個頁面上保持一致？

這是我的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粉165823783P粉165823783407 天前469

全部回覆(2)我來回復

  • P粉014218124

    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>

    回覆
    0
  • P粉083785014

    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檔案中進行編輯，它將應用於所有頁面的所有變更。

    回覆
    0
  • 取消回覆