导航栏中的活动状态（仅限 CSS）答案

【问题标题】：Active state in navigation bar (CSS only)导航栏中的活动状态（仅限 CSS）
【发布时间】：2017-05-09 05:23:06
【问题描述】：

目前我在我的网站中突出显示 active 选项卡，只有一个 CSS 类，问题是我有越来越多的标签，而且这个列表越来越大，每次我添加一个新标签时，我还需要在类中添加一个新的选择器

有没有 CSS 唯一的方法来简化这个？

body.students li.students,
body.teachers li.teachers,
body.sports li.sports,
...,
... {
    background-color: #000;
}

我将类添加到每个部分的正文中有没有办法用 CSS 做这样的事情？

body.[class] > li.[class] {
    background-color: #000;
}

基本上我只是如果两者（body和li）具有相同的类，我想添加一个属性

students.html

的示例

<body class="students">
    <ul>
        <li class="students">students</li>
        <li class="teachers">teachers</li>
</body>

在此示例中，li.students 将突出显示

teachers.html

的示例

<body class="teachers">
    <ul>
        <li class="students">students</li>
        <li class="teachers">teachers</li>
</body>

在此示例中，li.teachers 将突出显示

谢谢！

【问题讨论】：

显示一些 HTML....
试试这个stackoverflow.com/questions/25189536/…@handsome
你说的是不同的页面吗？
不可能只使用 css .. 你需要 jquery 来做到这一点
你已经做对了。有什么问题？

标签： html css

【解决方案1】：

更改您的 HTML 代码 - 引入一个类“current_page”（或任何您喜欢的名称）

<body class="students">
    <ul>
        <li class="students current_page">students</li>
        <li class="teachers">teachers</li>
    </ul>
</body>

或者

<body class="teachers ">
    <ul>
        <li class="students">students</li>
        <li class="teachers current_page">teachers</li>
    </ul>
</body>

这样，您将只需要一个选择器：

li.current_page {
    background-color: #000;
}

如果您不喜欢更改 HTML 代码，也可以在 JavaScript 中进行：

var classname = document.querySelector("body").className;
var li = document.querySelector("li." + classname);
li.className = li.className + " current_page";

【讨论】：

这是显而易见的方法。我想探索更野蛮的东西
这将需要有多个标题。我只有一个，我想避免在上面添加一些逻辑。
@handsome：我添加了一个 JavaScript 解决方案。