Question

我目前正在重做网站，我的所有网页顶部都会有一个公共导航栏：

我正在谈论的代码的小片段：

<div id="logoNavContainer">
    <nav>
        <ul>
            <li><a href="contentPage.html" class="glow">Services</a></li>
            <li><a href="contentPage.html" class="glow">Products</a></li>
            <li><a href="contentPage.html" class="glow">Training</a></li>
            <li><a href="contentPage.html" class="glow">Technology</a></li>
            <li><a href="contentPage.html" class="glow">Clients</a></li>
            <li><a href="publications.html" class="glow">Publications</a></li>
            <li><a href="contentPage.html" class="glow">Contact Us</a></li>
        </ul>
    </nav>
</div>

最初，当我编码时，我（并且仍然是可能）认为如果我可以为每个页面创建mainTemplate.html然后为其各自的内容创建一个单独的.html页面将非常方便这将显示在mainTemplate上的正确区域内。

这样对navBar，链接，背景等的任何更改都可以从一个位置完成，由于CSS的目的，这是我认为可能存在的位置。

但是，因为我只是在导航栏的每个页面的开头都有相同的HTML代码，但至少它都是由一个CSS表单设置的。

所以我（以及未来的程序员）可以从一个位置编辑所有页面的样式。

现在我正在实现每个页面，我注意到我必须经历越来越多的页面来更改navBar链接，并且每次都是相同的操作。

我想知道是否有可能在每个html文件中设置一个变量或某些东西（比如在Java中），这个变量或东西设置在一个位置，以便可以立即换掉所有链接？

我只是想让更改更容易，并消除冗余。我对Html和CSS很陌生，所以我觉得我可能错过了一个非常明显的解决方案。

此外，如果我有可能的原始想法，我更喜欢这个解决方案，因为它解决了不止一个问题，并消除了许多冗余代码。

提前致谢。

Answer 1

在纯HTML中，这是不可能的。我现在可以想到两种可能的解决方案：

<强>预处理您可以使用PHP之类的任何处理器来提供静态HTML页面。在我看来，这是最好的方法。它只需要你调用include（'header.html'）并包含标题。这就是它在各地的表现。

<强>的JavaScript 您还可以使用JavaScript从其他位置加载导航栏。这里的缺点是它将每页需要两个请求，你必须加载某种加载动画，直到加载导航栏。

编辑：我刚刚意识到你可以在纯HTML中使用frames / iframes。请记住，我首先没有提出框架，因为......好吧，框架很糟糕:)）

Answer 2

您可以看到this article。纯HTML不支持包含。本文包含一个可以使用的JavaScript解决方案（参见下面的摘录）。

One Option

因此，对于您的代码，您可以这样做：

var navigationDiv = "<div id='logoNavContainer'>" +
                        "<nav>" +
                            "<ul>" +
                                "<li><a href='contentPage.html' class='glow'>Services</a></li>" +
                                "<li><a href='contentPage.html' class='glow'>Products</a></li>" +
                                "<li><a href='contentPage.html' class='glow'>Training</a></li>" +
                                "<li><a href='contentPage.html' class='glow'>Technology</a></li>" +
                                "<li><a href='contentPage.html' class='glow'>Clients</a></li>" +
                                "<li><a href='publications.html' class='glow'>Publications</a></li>" +
                                "<li><a href='contentPage.html' class='glow'>Contact Us</a></li>" +
                            "</ul>" +
                        "</nav>" +
                    "</div>";
document.write(navigationDiv);

Answer 3

非常肮脏的解决方案：

使用内容创建mymenu.js：

document.write("<div id='logoNavContainer'><nav><ul><li><a href='contentPage.html' class='glow'>Services</a></li></ul></nav></div>");

在你要给navbar的所有html中都包括：

<script src="mymenu.js"></script>

希望它有所帮助！彼得

Answer 4

好的，我在这工作了一段时间;研究你的每个答案并尝试将其融入我的代码中。

PHP我完全不熟悉，所以我没有在任何地方玩它，虽然我使用javascript我也放弃了。

直到我回来看到Rachel G的最新答案。我用它结合讨论用javascript生成html以及我自己的javascript，我设法制作了一个正是我想要的功能版本！

以下是我现在包含在每个页面开头的HTML的方式：

<!doctype html> 
    <html lang="en">
        <head>
            <meta charset="utf-8">
            <link href="styleSheet.css" rel="styleSheet" />
            <script src="pageFeatures.js" type="text/javascript"></script>
        </head>

<body onload="init('tabs')">

    <div id="main-container">
        <div id="navBar">
            <!-- Loaded through Javascript; eliminates repeated code and all navBar Links are now set in one place -->
        </div>
       .... All page specific code.

创建navBar的javascript：

链接：

// Links
var servicesPage = 'designAudit.html';
var productsPage = 'pageTemplate.html';
var trainingPage = 'pageTemplate.html';
var technologyPage = 'pageTemplate.html';
var clientsPage = 'pageTemplate.html';
var publicationsPage = 'publications.html';
var contactPage = 'pageTemplate.html';

Init（）

function init(tabs) {
    initNavBar();
    if (tabs == 'tabs') {
      initTabs();
    }
}

InitNavBar（）

// BEGIN NAVBAR GENERATING CODE
function initNavBar() {
  var navBar = document.getElementById("navBar");

  var navContainer = document.createElement("div");
  navContainer.setAttribute('id','logoNavContainer');
      var header = document.createElement("header");
          var h1 = document.createElement("h1");
              var logo = document.createElement("a");
              logo.setAttribute('href','index.html');
          h1.appendChild(logo);

          var nav = document.createElement("nav");
            var ul = document.createElement("ul");
              var link1 = createLink(servicesPage, "Services");
              var link2 = createLink(productsPage, "Products");
              var link3 = createLink(trainingPage, "Training");
              var link4 = createLink(technologyPage, "Technology");
              var link5 = createLink(clientsPage, "Clients");
              var link6 = createLink(publicationsPage, "Publications");
              var link7 = createLink(contactPage, "Contact");

            ul.appendChild(link1);
            ul.appendChild(link2);
            ul.appendChild(link3);
            ul.appendChild(link4);
            ul.appendChild(link5);
            ul.appendChild(link6);
            ul.appendChild(link7);
      nav.appendChild(ul);
    header.appendChild(h1);
    header.appendChild(nav);
  navContainer.appendChild(header);

  navBar.appendChild(navContainer);
}

建立连结（）

// Indented to Represent Html layering.
function createLink(destPage, text) {
  var link = document.createElement("li");        // <li>
    var linkAnchor = document.createElement("a");   //    <a>
    linkAnchor.setAttribute('href', destPage);      //    <a href="">
    linkAnchor.setAttribute('class','glow');      //    <a href="" class="glow">
      var services = document.createTextNode(text); //    <a href="" class="glow">Text
    linkAnchor.appendChild(services);         //    </a>
  link.appendChild(linkAnchor);             // <li>
  return link;
}

无论如何，感谢您的帮助。我想我会发布我想出的解决方案，因为它与此处的内容有很大不同。

我确实有一个问题，如果有人检查过这个问题，那么如果客户的浏览器没有这个问题，这将完全让我的网站失去美感。这有可能发生吗？

我知道我从来没有亲自使用没有javascript的电脑，但世界通常并不那么简单。

网站 - 是否可以在中心位置设置链接？

4 个答案: