網站 - 是否可以在中心位置設置鏈接？

我目前在重做一個網站的過程中，我的所有網頁都將不得不在頂部有一個通用的導航欄：網站 - 是否可以在中心位置設置鏈接？

我談論代碼的小片段：

<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

網站 - 是否可以在中心位置設置鏈接？

回答

相關問題