將外部導航欄加載到多個HTML頁面

我創建了一個只包含導航欄和對其採取的操作的HTML頁面。
我想最多不過最近我用三件事情我自己的nav將外部導航欄加載到多個HTML頁面

一個id來加載div這裏面的html頁面：

include_once（）的;但是這是PHP的，我不想一個html頁面變成一個PHP頁面只針對一行代碼
Java腳本加載功能（不過IV讀這和它的不推薦）
jQuery的獲取函數，它與合作簡單的html文件，但由於在這個文件中我只包含了一個元素中的css和java腳本，將顯示哪個按鈕。

任何解決方案或建議？

nav.html：

<!doctype html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <title>nav</title> 
    <link rel="stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font- 
     awesome/4.7.0/css/font-awesome.min.css"> 
    <style> 
     .Layer { 
      height: 100%; 
      width: 0; 
      z-index: 1; 
      position: fixed; 
      left: 0; 
      top: 0; 
      background-color: rgb(0,0,0); 
      background-color: rgba(0,0,0, 0.9); 
      overflow-x: hidden; 
      transition: 0.5s; 
      display: flex; 
      flex-direction: row-reverse; 
     } 

     .Content { 
     position: relative; 
     margin: auto; 
     } 

    .Content a { 
     margin: auto; 
     text-decoration: none; 
     font-size: 36px; 
     transition: 0.3s 
    } 

    .Content a:hover, .Content a:focus { 
     color: #f1f1f1; 
    } 

    .Layer .closebtn { 
     font-size: 60px; 
    } 
    </style> 
</head> 
<body> 
    <div id="myNav" class="Layer"> 

    <a href="javascript:void(0)" class="closebtn" onClick="closeNav()"> 
    <i class="fa fa-window-close" aria-hidden="true"></i> 
    </a> 

    <nav class="Content"> 
    <ul> 
     <li><a href="#">Home</a></li> 
     <li><a href="#">Download</a></li> 
     <li><a href="#">About this</a></li> 
     </ul> 
    </nav>   
</div> 

<span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; open</span> 

    <script> 
    function openNav() { 
     document.getElementById("myNav").style.width = "100%"; 
    } 

    function closeNav() { 
     document.getElementById("myNav").style.width = "0%"; 
    } 
    </script>  
</body> 
</html>

的jQuery：

// JavaScript Document 
window.onload = function() 
{ 
    "use strict"; 
    //$("#nav").load("nav.html"); 
    $.get("navbar.html",function(data) 
      { 
     document.getElementById("nav").innerHTML=data; 

    }); 
};

來源

2017-07-27 Mansour Farokhinezhad

你可以使用Jquery .load函數或者我建議你使用這個指南https://www.w3schools.com/howto/howto_html_include.asp – Ciccio

HTML中的ID是「myNav」，但是你想要得到「nav」。我還建議使用jQuery來獲取文檔並將HTML分配爲：'$（「＃myNav」）。html（data）;' – SchoolBoy

@SchoolBoy nah這是來自兩個單獨的文件，我檢查了它們，它是正確的。 –

下面的代碼對我的作品：

的index.html：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Test</title> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
</head> 
<body> 
    <div id="include"></div> 
    <script> 
     window.onload = function(){ 
      $.get("inc.html", function(data){ 
       $("#include").html(data); 
      }) 
     } 
    </script> 
</body> 
</html>

inc.html：

<p>This was included using jQuery.</p>

我知道你說你已經檢查的名字，但我在你的問題中看到的nav.html，並沒有看到您要包括navbar.html。我有一種強烈的感覺，你在某個地方誤解了某些東西。

來源

2017-07-27 16:03:09 SchoolBoy

我的問題已經回答謝謝。 –

非常歡迎:) – SchoolBoy

將外部導航欄加載到多個HTML頁面

回答

相關問題