简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Keep page elements consistent: Make sure your title or logo is consistent across pages
P粉165823783
P粉165823783 2023-09-08 13:36:13
0
2
423

I have been working on my website for a while now and over time I have continued to add many sections to my website but I have been manually editing each page and every time I add a new button to redirect to a new section, and while this isn't difficult or takes too long, I'm not sure how well this will work in the long run.

The following are related titles

Is there a way to make these elements consistent on every page by changing just one file?

This is my 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>

This is CSS

.logocontainer {
   text-align: center;
}

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

.buttoncontainer {
    text-align: center;
}

.button {
    display: inline-block;
}

P粉165823783
P粉165823783

reply all(2)
P粉014218124
P粉0142181242023-09-09 11:36:15 2 floor

You need to add your menu to the menu.html page, and then call the menu.html page through 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>
Like +0
Add Reply
P粉083785014
P粉0837850142023-09-09 10:07:27 1 floor

You can do this:

<div id="buttoncontainer">
</div>

<script src="./path-to/js/header.js"></script> // 在闭合的body标签之前添加

In your header.js file, you can do this: 

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

Call this on all pages and once you make an edit in the js file it will be applied to all changes on all pages.

Like +0
Add Reply
Popular Topics
More>
Popular Articles
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！