Хорошо, я работал над этим некоторое время; исследуя каждый из ваших ответов и пытаясь включить его в мой код.
PHP, с которым я совершенно незнаком, поэтому я нигде не играл с ним, и хотя я работал с javascript, я тоже отказался от него.
Пока я не вернулся и не увидел обновленный ответ Рэйчел Дж. Я использовал это в сочетании с обсуждением создания html с помощью javascript вместе с моим собственным куском 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, который создает navBar:
Ссылки:
// 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';
Инициирование ()
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);
}
createLink ()
// 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, но мир обычно не так прост.