Question

我已经构建了一个简单的CSS下拉菜单。我正在寻找的是一种将css样式类添加到菜单范围的方法，具体取决于您所在的目录。

例如，您位于该目录中任何页面上的联系人目录http://www.site.org/contact中我希望联系人菜单项是具有ID名称的范围，以保持分配给.current的颜色。然后，如果你离开前往about目录，那么联系人将解除.current样式以及对.current的更改。

Answer 1

您可以做的一件事就是将CSS视为主题。对于“每个目录主题”这种方法的方法是使用一个基本的样式集，这些样式将始终应用于站点，然后在每个目录中都有一个样式表覆盖要更改的基本样式该目录的主题。

所以，例如，如果你把它放在所有页面上：

<link rel="stylesheet" type="text/css" href="/base.css">
<link rel="stylesheet" type="text/css" href="theme.css">

你是说base.css（在网站的根目录中）将定义大部分样式，但是theme.css将在当前页面的同一目录中查找，并且样式也将应用于页面，允许您覆盖不同颜色的基本样式等。

如果您有动态网站，则应该能够将类添加到当前应处于活动状态的导航元素中。但是，如果它是静态的，或者您无法添加/删除类，则可以为每个导航元素指定唯一的ID，并在各种theme.css文件中使用该ID将样式应用于该目录中的相应导航项。 / p>

如果你深入某个特定目录下，事情会变得有点棘手，但解决方案是要么复制该目录中的主题文件（yuck），要么让更深的HTML页面链接到正确的目录，如这个（较低的1个目录的例子）：

<link rel="stylesheet" type="text/css" href="/base.css">
<link rel="stylesheet" type="text/css" href="../theme.css">

Answer 2

你能做的就是这样（JavaScript）：

document.getElementsByTagName('body')[0].className += ' ' + 
  window.location.path.replace(/^\//, '').replace(/\//g, '-');

然后你可以有样式规则，如：

body.content .menu { color: green; }

或其他什么。您可以在<body>标记出现之后的某个时间运行代码，但在DOM准备好之前，以避免“无格式内容的闪现”（或者，在这种情况下，“闪烁的错误样式的内容”））。

Answer 3

假设你有这样的事情：

<ul id="nav">
  <li id="nav-menu1">...</li>
  <li id="nav-menu2">...</li>
  <li id="nav-about">...</li>
  <li id="nav-contact">...</li>
</ul>

然后你可以做类似的事情：

var whichCurrent = 'nav-' + window.location.href.replace('http://www.site.org/', '');
document.getElementById(whichCurrent).className = 'current';

然后在您的菜单Javascript中根据您的规范添加和删除current类。