对“当前页面”导航元素进行分类的最简单方法？答案

【问题标题】：Easiest way to class "current page" nav element?对“当前页面”导航元素进行分类的最简单方法？
【发布时间】：2010-06-04 03:33:56
【问题描述】：

我的网页上有一个导航栏，其中包含指向不同页面的链接。有没有一种简单的方法可以自动在当前页面对应的导航元素上设置类？例如，如果您当前正在查看“关于我们”页面，我希望栏上的“关于我们”选项卡具有不同的样式。我知道我可以为每个页面安装一些 PHP，但我宁愿有一个更通用的设置并忘记它的解决方案。

【问题讨论】：

【解决方案1】：

我以前用过这个，效果很好。

【讨论】：

【解决方案2】：

如果你想要一个纯 HTML/CSS 解决方案，我能想到的最好的方法是在 body 上放置一个类，描述应该突出显示哪个选项卡，并在每个选项卡上设置一个 id，然后通过 CSS 从那里定位选项卡。

因此，对于 HTML，“关于我们”页面将具有类似 <body class="AboutUs"> 的内容，而“主页”页面将具有类似的 <body class="Home">。每个标签都有唯一的 ID，例如“aboutUs”和“home”。

然后在 CSS 中，你可以这样设置样式：


body.AboutUs tabs#aboutUs,
body.Home tabs#home
{
    /* selection style goes here */
}

【讨论】：