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

Question

我創建了一個僅包含導航欄和要執行的操作的html頁面。
我想在id為nav的div加載此html頁面

但是直到最近，我自己還是使用了三件事：

include_once（）的; 但這是PHP，我不想僅將一行代碼將html頁面更改為php頁面
java腳本加載功能（但是iv讀了它，不推薦）
jQuery get function，它與簡單的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;

    });
};

Answer 1

以下代碼對我有用：

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。 我有一種強烈的感覺，你在某處給某事取了錯名。

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

問題描述

1 個解決方案

解決方案1
1 已采納 2017-07-27 16:03:09

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

問題描述

1 個解決方案

解決方案1 1 已采納 2017-07-27 16:03:09

解決方案1
1 已采納 2017-07-27 16:03:09