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/

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

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

Answer 2

如果您不需要很多服务器端逻辑，则可以使用static site generator。

Answer 3

您需要引入嵌入式编程语言。您可以在运行时或构建过程中执行此操作。许多语言都有这样做的工具：

PHP
Java：JSP
VB / C＃：ASP
Ruby：ERB
Python：Jinja
JavaScript：Jupiter's EJS，Visionmedia's EJS

以下是使用PHP的示例：

<!-- index.php, contact.php, whatever.php -->
<html>
<head></head>
<body>
 <!-- We include a reference to the file with the header -->
 <?php include("header.php"); ?>
 <p>Welcome to the home page!</p>
</body>
</html>

在指定标题的文件中，您需要添加一个帮助函数，该函数将确定何时将类设置为＆＃34; current＆＃34;。这是一个粗略的例子：

<!-- header.php -->

<?php
  // Prints "active" if the provided page name matches the extensionless basename
  // of the current script. For example, if the current file is index.php or
  // index.html, the function will echo 'current' for when $page_name = index
  function active_page_class($page_name) {
    $filename = basename($_SERVER['SCRIPT_NAME']);
    $filename_without_ext = substr($filename, 0, strrpos($filename, '.'));
    if ($filename_without_ext == $page_name) echo 'active';
  }
?>

<div id="menu">
  <ul>
    <li class="<?php active_page_class('index') ?>">
      <a href="index.html"></a>
    </li>
    <li class="<?php active_page_class('contact') ?>">
      <a href="contact.html"></a>
    </li>
  </ul>
</div>

现在，您可以使用JavaScript / jQuery替代在PHP中编写当前页面类助手。这是一个jQuery示例：

$(function() {
  $('#menu li').each(function() {
    var href = $(this).find('a').attr('href');
    if (href === window.location.pathname) {
      $(this).addClass('active');
    }
  });
});

您可以使用JavaScript在每个页面中附加菜单栏，而不是使用服务器端脚本。

请注意，使用像PHP这样的语言要求您在支持该语言的服务器上托管该站点，或者在发布之前在本地构建文件。

您可以使用命令行工具轻松构建任何PHP页面：

php index.php > index.html

您还可以考虑使用static site generator。其中许多提供了许多你可能会觉得有用的漂亮功能。

Answer 4

我建议使用PHP或一些基于php的框架，并包含您想要显示的部分页面。

示例：

file1.php

<?php

$text = "Lorem ipsum dolor sit ....";

?>

file2.php

<?php
include file1.php;

<h1>Welcome!</h1>
echo "$text";

?>

有关更多示例，请尝试查看here，w3schools有非常简单的php教程。

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

4 个答案: