Question

我想要一个单独的html文件中的导航栏，然后在我的所有其他页面中使用。我觉得它会使代码看起来更整洁，更有条理。但是，我遇到了一些麻烦。我开始尝试修复主页，这就是我所拥有的：

<!DOCTYPE html>
<html>
<head>
  <title>Home Page</title>
  <link rel="stylesheet" type="text/css" href="style.css">
  <link rel="import" href="navigation.html">


  </head>

<body>



<br><br>
<div class="zoom pic">
 <center> <img src="images/technology.png" alt="portrait"> <center>
</div>


</body>

</html>

这是单独的html文件中的导航栏，但与我所有其他html文件位于同一目录中。

如果它对任何内容有帮助，这是navigation.html文件：

<!DOCTYPE html>
<html>
<head>
  <title>Home Page</title>
  <link rel="stylesheet" type="text/css" href="style.css"> 

</head>



<center> <b>World Congress CS-IT Conferences 2016</center>
<div id="horizontalmenu">
  <ul>
   <li><a href="index.html" title="Home Page">Home<br/></a></li>
   <ul> <li><a href="information.html">General Information</a> <ul> 
        <li><a href="about.html">About</a></li> 
        <li><a href="fee.html"> Conference Fee</a></li> 
        <li><a href="hotel.html">Hotel</a></li> </ul>
   <li><a href="keynote.html" title="Speakers">Keynote Speakers<br/></a></li>
   <li><a href="call.html" title="Call for Papers">Call for Papers<br/></a></li>
   <li><a href="dates.html" title="Important Dates">Important Dates<br/></a></li>
   <li><a href="major.html" title="Major Areas">Major Areas<br/></a></li>
   <li><a href="paper.html" title="Submit a Paper">Paper Submission<br/></a></li>
   <li><a href="reviewer.html" title="Login">Login<br/></a></li>
   <li><a href="register.html" title="Register online">Registration<br/></a></li>
   <li><a href="conference.html" title="Conference">Conference Program<br/></a></li>
   <li><a href="guidelines.html" title="Guidelines">Guidelines<br/></a></li>
   <li><a href="comments.html" title="Comments and Feedback">Comments<br/></a></li>
  </ul>
</nav></b>

我目前的问题是我现在没有在主页上看到导航栏！关于如何解决这个问题的任何想法？非常感谢任何帮助!!!!

Answer 1

PHP可以帮助您实现这一目标。

将导航条形码保存在navbar.php文件中，并将此文件包含在您想要导航栏的页面中。例如，如果要在index.php文件中包含导航栏，则可以像这样包含它。

include_once("navbar.php");

您需要一台服务器才能运行php代码。您不能直接在其他HTML文件中包含HTML文件。

Answer 2

这也可以使用jQuery来完成。在这里，你在navigationBar.html中编写nagivation bars html，在你想要包含它的任何页面中，创建一个id为#nav的空元素，并在脚本中替换它的内容。

$.get("navigationBar.html", function(data){
    $("#nav").replaceWith(data);
});

这也可以使用html5导入标记http://blog.teamtreehouse.com/introduction-html-imports

来完成

如果你愿意，请查看此链接。

在所有页面中包含HTML导航栏

2 个答案: