根据目录位置应用CSS类

我已经构建了一个简单的CSS下拉菜单。我正在寻找的是一种方法来添加一个CSS样式类的菜单范围取决于你在哪个目录。根据目录位置应用CSS类

例如，你在联系目录http://www.site.org/contact在该目录中的任何页面我想联系菜单项，这是一个id名称的跨度，以保持分配给.current的颜色。然后，如果您离开前往about目录，联系人将忽略.current样式和关于.current的更改。

来源

2011-04-20 Cdill

这是一个静态网站？菜单是如何构建的？你在使用ASP，PHP或其他语言吗？ – 2011-04-20 18:06:26

这可以在服务器端轻松完成。在服务器端，您始终知道正在处理哪个目录或网址。所以你可以追加CSS类的菜单跨度根据网址/目录 – 2011-04-20 18:07:50

该链接不适用于我... – 2011-04-20 18:09:30

你可以做的一件事就是对待CSS，因为它是一个主题。对于“每个目录的主题”完成这种方式的方法是让一组总是适用于该网站的基线样式，然后在每个目录中都有一个样式表来覆盖要更改的基础样式该目录的主题。

因此，举例来说，如果你把这个所有的网页：

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

你是说base.css（在网站的根目录下）将决定大部分的款式，但随后theme.css会在当前页面的同一目录中查找，并且样式也适用于该页面，允许您使用不同颜色替换基本样式等。

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

如果您在特定目录下进行更深入的操作，事情会变得有点棘手，但是解决方案是复制该目录中的主题文件（yuck），或者让更深的HTML页面链接到正确的目录像这样（例如1根目录下）：

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

来源

2011-04-20 18:23:43 cdeszaq

这可能是最简单的方法。我甚至没有想到这一点。谢谢。 – Cdill 2011-04-20 22:45:20

你可以做的就是这样的事情（JavaScript的）：

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

然后你就可以有样式规则一样：

body.content .menu { color: green; }

或其他。在<body>标签存在之后但DOM准备就绪之前，您需要运行代码以避免出现“未格式化内容的闪光”（或者，在这种情况下，“闪现错误的内容”）。

来源

2011-04-20 18:25:37 Pointy

比方说，你有这样的事情：

<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类。

来源

2011-04-20 18:25:57 mVChr

根据目录位置应用CSS类

回答

相关问题