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

我目前在重做一个网站的过程中，我的所有网页都将不得不在顶部有一个通用的导航栏：网站 - 是否可以在中心位置设置链接？

我谈论代码的小片段：

<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的正确区域内。

这样的导航栏，链接，背景等的任何变化可以从一个位置，这是一件好事，我觉得可能存在由于CSS的目的来完成。

但是，因为它是我只是有相同的HTML代码为在导航栏每一页的开始，但至少它是全部由一个CSS样式表单。

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

现在我执行我注意到，我要经过越来越多的网页更改导航栏链接的每一页，这是每一次同样的动作。

我想知道是否有可能设定在每个HTML文件中的变量或东西（如Java中），它被设置在一个位置，使所有的联系，可以马上换出？

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

此外，如果原来的想法，我有可能，我会多，因为它解决了多个问题，并消除冗余代码分数喜欢这种解决方案。

在此先感谢。

来源

2012-02-07 Alex

这是直接的客户端HTML还是你使用某种服务器端技术，可以协助管理？ – 2012-02-07 19:40:45

我对此很陌生，所以我一直这么做很简单。我有一组由中央CSS样式表格样式的.html文件。我真正做的最复杂的事情是为主页上的标签内容创建一个JavaScript函数。 – Alex 2012-02-07 19:43:35

好吧，我曾在这一段时间;研究你的每个答案，并试图将其应用到我的代码中。

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.

和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的电脑，但世界通常并不那么简单。

来源

2012-02-08 17:49:47 Alex

在纯HTML中是不可能的。有迹象表明，我能想到的，现在两个可能的解决方案：

预处理 您可以使用诸如PHP任何处理器为你的静态HTML页面。我认为这是最好的方法。它只会要求你调用include（'header.html'），头文件将包含在内。这就是它在任何地方完成的方式。

JavaScript 您还可以使用JavaScript从不同位置加载导航栏。这里的缺点是，它会每页需要两个请求，并且你必须建立一些加载动画，直到导航栏被加载。

编辑：我刚才意识到你可以在纯HTML中使用frames/iframes。记住我没有拿出摆在首位帧唔...帧吮吸:)

来源

2012-02-07 19:42:15 kaoD

或者，如大多数网络服务器支持，SSI（服务器端包括） – KevinDTimm 2012-02-07 19:43:48

@KevinDTimm我不知道SSI，很高兴知道:) – kaoD 2012-02-07 19:47:04

非常肮脏的解决方案：

创建的MyMenu。JS与内容：

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

在你想给导航栏所有的HTML包括此：

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

希望它能帮助！彼得

来源

2012-02-07 19:54:32 Peter

我一直在努力让您的解决方案工作，并且它工作正常，但如果我试图格式化字符串，使它看起来就像我的html，通过添加newLines来提高可读性，它会停止识别它。有没有办法解决？我知道在Java中，只要它在两个引号之间，就可以以任何方式格式化字符串，但在这里似乎不是这种情况。 – Alex 2012-02-07 20:30:56

@Alex在我的答案中尝试一下代码块。 – 2012-02-07 21:49:59

你可以看到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);

来源

2012-02-07 19:54:39

Peter举了一个JavaScript选项的例子。 – 2012-02-07 20:11:00

虽然最后的解决方案非常不同，但我的最终解决方案确实帮助我解决了这个问题，谢谢。 +1 – Alex 2012-02-08 17:51:59

很高兴帮助:) – 2012-02-08 18:00:17

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

回答

相关问题