Question

我创建了一个仅包含导航栏的html页面以及要采取的操作我想在div内加载此html页面，其ID为nav

然而直到最近我自己使用了3件事：

include_once（）的;但这是PHP我不想改变一个HTML页面到一个只有一行代码的php页面
java脚本加载函数（但是我读过这个并不推荐使用它）
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 个答案: