简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Pastikan elemen halaman konsisten: Pastikan tajuk atau logo anda konsisten merentas halaman
P粉165823783
P粉165823783 2023-09-08 13:36:13
0
2
487

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

P粉165823783
P粉165823783

membalas semua(2)
P粉014218124
P粉0142181242023-09-09 11:36:15 Tingkat 2

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>
Suka +0
Tambah Balasan
P粉083785014
P粉0837850142023-09-09 10:07:27 Tingkat 1

Anda boleh melakukan ini:

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

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

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.

Suka +0
Tambah Balasan
Topik popular
Lagi>
Artikel popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！