suchen

Heim  >  Fragen und Antworten  >  Hauptteil

Halten Sie die Seitenelemente konsistent: Stellen Sie sicher, dass Ihr Titel oder Logo auf allen Seiten konsistent ist

Ich arbeite jetzt schon eine Weile an meiner Website und habe im Laufe der Zeit immer wieder Abschnitte zu meiner Website hinzugefügt, aber ich habe jede Seite manuell bearbeitet und jedes Mal, wenn ich eine neue Schaltfläche hinzufüge, um zu einem neuen Abschnitt weiterzuleiten, und währenddessen ist nicht schwierig oder dauert zu lange, ich bin mir nicht sicher, wie gut das auf lange Sicht funktionieren wird.

Die folgenden Titel sind verwandte Titel

Gibt es eine Möglichkeit, diese Elemente auf jeder Seite konsistent zu machen, indem nur eine Datei geändert wird?

Das ist mein HTML-Code

<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>

Das ist CSS

.logocontainer {
   text-align: center;
}

.logo {
   display: inline-block;
   margin-bottom: 10px;
}

.buttoncontainer {
    text-align: center;
}

.button {
    display: inline-block;
}

P粉165823783P粉165823783495 Tage vor535

Antworte allen(2)Ich werde antworten

  • 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>

    Antwort
    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文件中进行编辑，它将应用于所有页面的所有更改。

    Antwort
    0
  • StornierenAntwort