Fatal编程技术网
  • html/
  • Html 导航栏中的活动状态（仅CSS）

Html 导航栏中的活动状态（仅CSS）

html css

Html 导航栏中的活动状态（仅CSS）,html,css,Html,Css,目前，我在我的网站上用一个CSS类突出显示active选项卡， 问题是我有越来越多的选项卡，这个列表越来越大，每次我添加一个新选项卡时，我还需要向类添加一个新的选择器 有没有一个CSS唯一的方法来简化这个过程 body.students li.students, body.teachers li.teachers, body.sports li.sports, ..., ... { background-color: #000; } 我正在为每个部分的主体添加类 有没有一种方法可以用C

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

有没有一个
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>

<body class="teachers">
    <ul>
        <li class="students">students</li>
        <li class="teachers">teachers</li>
</body>
在本例中，
li.教师
将突出显示

谢谢

更改HTML代码-引入一个类“current_page”（或任何你想称之为它的类）

如果您不想更改HTML代码，也可以使用JavaScript：

var classname = document.querySelector("body").className;
var li = document.querySelector("li." + classname);
li.className = li.className + " current_page";
改变你的HTML代码-引入一个类“current_page”（或者你想叫它什么名字）

如果您不想更改HTML代码，也可以使用JavaScript：

var classname = document.querySelector("body").className;
var li = document.querySelector("li." + classname);
li.className = li.className + " current_page";
显示一些HTML…试试这个@handome你是在说不同的页面吗？只使用css是不可能的。。要做到这一点，您需要jquery—您已经正确地做到了。有什么问题吗？显示一些HTML…试试这个@handome你说的是不同的页面吗？只使用css是不可能的。。要做到这一点，您需要jquery—您已经正确地做到了。有什么问题吗？这是显而易见的方法。我想探索一些更原始的东西，这将需要有多个标题。我只有一个，我想避免在上面添加一些逻辑。@帅哥：我添加了一个JavaScript解决方案。这是显而易见的方法。我想探索一些更原始的东西，这将需要有多个标题。我只有一个，我想避免在上面添加一些逻辑。@shammy:我添加了一个JavaScript解决方案。 
li.current_page {
    background-color: #000;
}

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