css - 如何在没有服务器端编程的情况下使 html 导航栏变得简单

Question

我的网站有四个菜单。

<div id="menu">
<ul>
    <li class='active'><a href='home.html'><span>Home</span></a></li>
     <li><a href='about.html'><span>About</span></a></li>
     <li><a href='support.html'><span>Support</span></a></li>
     <li><a href='contact.html'><span>Contact</span></a></li>
</ul>
</div>

每个 html 文件都有相同的内容，我将 class='active' 放在不同的地方。

但是如果我要添加更多菜单，或者如果我想将文件名home.html更改为index.html。我需要打开所有文件并修改它。我认为这不是一件好事。

一般来说什么是好的解决方案？

提前致谢。

更新

我没说。我的错。我不想使用编程语言。我只是想知道使用 html/css 的任何简单方法。

Answer 1

如果您真的不想使用任何服务器端语言，如 php、asp 等，您可以使用 javascript，因为我认为这正是您要问的。仅使用 html 标记是不可能的。

document.write("<div id=\"menu\">");
document.write("<ul>");
document.write("<li class='active'><a href='home.html'><span>Home<\/span><\/a><\/li>");
document.write("<li><a href='about.html'><span>About<\/span><\/a><\/li>");
document.write("<li><a href='support.html'><span>Support<\/span><\/a><\/li>");
document.write("<li><a href='contact.html'><span>Contact<\/span><\/a><\/li>");
document.write("<\/ul>");
document.write("<\/div>");

将所有这些放在一个 js 文件中，也许是 menu.js，然后在每个 html 页面中放置一个脚本标记来调用它。

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

至少这样你可以在不使用服务器端脚本的情况下改变它的一个地方。可能理想也可能不理想，但希望它能回答您的问题。

如果您需要更多信息，这里有几个地方可能会对您有所帮助。

http://www.w3schools.com/jsref/met_doc_write.asp

http://www.accessify.com/tools-and-wizards/developer-tools/html-javascript-convertor/

使用最后一个为您轻松创建文档.write。

您还应该使用条件来确定哪个页面当前处于事件状态以放置您的事件类。