Question

我正在创建一个网站，其菜单栏存储在另一个文件中（来自here的解决方案）。我还将css存储在一个单独的文件中，链接到菜单栏：

如果当前页面显示在我网站上的每个页面都会突出显示。但是，由于我的html是一个单独的文件，我不能只添加class="current"或类似的东西。这就是我想出的：

为每个网站添加css，选择ul:nth-child(n)添加所有需要的CSS。

如果我更改元素的顺序，一切都会搞砸！
有没有更好的方法可以在以后添加css？

Answer 1

您可以在每个页面的正文中添加id，在每个菜单项中添加另一个，然后在相关正文{{1}中包含菜单id时应用突出显示样式}。

例如，如果您有一个约会页面，您将使用：

id

每个项目的菜单都有id：

<body id="about-page">

</body>

你会以这种方式制定风格规则：

<ul class="menu">
  <li id="main"><a hef="/">My page</a></li>
  <li id="shop"><a hef="/">Shop</a></li>
  <li id="about"><a hef="/">About me</a></li>
</ul>

Answer 2

我使用了类似于我网站页面布局的id方案，并应用了一个javascript函数，将查询拆分为多个部分，并将css添加到所需的id。

<link rel="stylesheet" href="menu.css" type="text/css"/>
<nav id="menu_wrap">
      <ul>
        <li><a id="home" href="/">Home</a></li>
        <li><a id="school" href="">School</a>
          <ul>
            <li><a id="trinomial" href="https://reteps.tk/school/trinomial_calculator">Trinomial Calculator</a></li>
            <li><a id="radical" href="https://reteps.tk/school/radical_calculator">Radical Calculator</a></li>
            <li><a id="grades" href="https://reteps.tk/school/grades_calculator">Grade Calculator</a></li>
            <li><a id="trig" href="https://reteps.tk/school/trig_calculator">Trig Calculator</a></li>
            <li><a id="kahoot" href="https://reteps.tk/school/kahoot_bot">Kahoot Bot</a></li>
          </ul>
        </li>
        <li><a href="/blog/home">Blog</a></li>
        <li><a href="/other">Other</a></li>
        <li><a href="https://github.com/reteps">Github</a></li>
      </ul>
</nav>
<script>
  var path = window.location.pathname;
  if (path == "/") {
    document.getElementById("home").style.background = "#27e8e8";
  } else {
    var sections = path.split("/");
    for (var i = 1;i < sections.length;i++) {
      document.getElementById(sections[i].split("_")[0]).style.background = "#27e8e8";
    }
  }
</script>

之后将{CSS}属性添加到html

2 个答案: