Saya memiliki bilah navigasi di halaman berikut

https://stackblitz.com/edit/web-platform-bcjvzq?file=index.html

Mengklik ke beranda atau tentang tombol menyebabkan halaman penuh dimuat ulang, pertama di string kiri atas muncul daripada halaman navigasi memuat sedetik kemudian. Transisinya tidak mulus. Apa yang menyebabkan ini?

2
adam 11 Mei 2021, 19:14

1 menjawab

Jawaban Terbaik

Masalah yang Anda alami adalah saat menavigasi halaman, seluruh HTML, CSS, dan JavaScript dimuat. Kemudian browser dapat menginterpretasikan JavaScript di dalam HTML Anda, yang bertanggung jawab untuk memuat navigasi Anda:

  <script>
    $(function   () {
            $("#nav-placeholder").load("navigation.html");
        });
  </script>

Untuk memperbaikinya, Anda dapat memuat/mengubah konten Anda dengan mengklik navigasi. Di index.html Anda, Anda dapat menentukan metode untuk menyetel konten.

<div id="content"></div>  
  <script>
    $("#content").load("index2.html"); //loading the initial content
    function setBody(url){
      $("#content").load(url);
    }
  </script>

Dan kemudian dalam panggilan navigasi buat item daftar Anda memanggil fungsi ini:

  <li><a id="len1" class="hoverable" onclick="setBody('index2.html')">Home</a></li>
  <li><a id="len2" class="hoverable" onclick="setBody('body2.html')">About</a></li>
0
Celdus 14 Mei 2021, 08:06