网站 - 是否可以在中心位置设置链接?
我目前在重做一个网站的过程中,我的所有网页都将不得不在顶部有一个通用的导航栏:网站 - 是否可以在中心位置设置链接?
我谈论代码的小片段:
<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很陌生,所以我觉得我可能会错过一个非常明显的解决方案。
此外,如果原来的想法,我有可能,我会多,因为它解决了多个问题,并消除冗余代码分数喜欢这种解决方案。
在此先感谢。
好吧,我曾在这一段时间;研究你的每个答案,并试图将其应用到我的代码中。
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的电脑,但世界通常并不那么简单。
在纯HTML中是不可能的。有迹象表明,我能想到的,现在两个可能的解决方案:
预处理 您可以使用诸如PHP任何处理器为你的静态HTML页面。我认为这是最好的方法。它只会要求你调用include('header.html'),头文件将包含在内。这就是它在任何地方完成的方式。
JavaScript 您还可以使用JavaScript从不同位置加载导航栏。这里的缺点是,它会每页需要两个请求,并且你必须建立一些加载动画,直到导航栏被加载。
编辑:我刚才意识到你可以在纯HTML中使用frames/iframes。记住我没有拿出摆在首位帧唔...帧吮吸:)
或者,如大多数网络服务器支持,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>
希望它能帮助! 彼得
我一直在努力让您的解决方案工作,并且它工作正常,但如果我试图格式化字符串,使它看起来就像我的html,通过添加newLines来提高可读性,它会停止识别它。有没有办法解决?我知道在Java中,只要它在两个引号之间,就可以以任何方式格式化字符串,但在这里似乎不是这种情况。 – Alex 2012-02-07 20:30:56
@Alex在我的答案中尝试一下代码块。 – 2012-02-07 21:49:59
你可以看到this article。纯粹的HTML不支持包含。该文章包含一个您可以使用的JavaScript解决方案(请参阅下面的摘录)。
因此,对于你的代码,你可以这样做:
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);
Peter举了一个JavaScript选项的例子。 – 2012-02-07 20:11:00
虽然最后的解决方案非常不同,但我的最终解决方案确实帮助我解决了这个问题,谢谢。 +1 – Alex 2012-02-08 17:51:59
很高兴帮助:) – 2012-02-08 18:00:17
这是直接的客户端HTML还是你使用某种服务器端技术,可以协助管理? – 2012-02-07 19:40:45
我对此很陌生,所以我一直这么做很简单。我有一组由*CSS样式表格样式的.html文件。我真正做的最复杂的事情是为主页上的标签内容创建一个JavaScript函数。 – Alex 2012-02-07 19:43:35