根据活动页面更改突出显示的 a-tag答案

【问题标题】：Change which a-tag is highlighted depending on active page根据活动页面更改突出显示的 a-tag
【发布时间】：2021-12-18 15:28:13
【问题描述】：

所以我有一个包含不同项目的菜单

<div class="right-nav">
    <a href="/metrics/website/index" class="active">Home</a>
    <a href="/metrics/website/pages/archives">Archives</a>
</div>

class="active" 突出显示了菜单项，我想知道如何根据我所在的页面来改变这个类。所以如果用户访问了Archives，那么就有class="active"。

类只是一个简单的颜色

.topnav a.active {
    /* When a-tags inside this class has been clicked - do highlight*/
    color: var(--selected-nav-page);
}

我所有的 html 代码都在 php 文件中运行。

更新

可能已经找到了一些有用的东西，使用 php，你们怎么看？

制作了一个php 脚本，用于检查我当前所在的页面，并在我的 a-tags 中写入活动与否。

<?php
    function active($currect_page){
        $url = str_replace(".php", "", basename($_SERVER['PHP_SELF'])); //name without .php
        if($currect_page == $url){
            echo 'active'; //class name in css
        }
    }
?>

<div class="right-nav">
    <a href="#index" class="<?php active('index'); ?> active">Home</a>
    <a href="#archives" class="<?php active('archives'); ?>">Archives</a>
</div>

【问题讨论】：

你不能单独使用 HTML 和 CSS 来做到这一点。您需要在客户端（即 JavaScript）或后端（例如 PHP、ASP.NET、JavaScript [通过 Node 或 Deno 或其他] 等）上运行代码。
我在php中运行这个，将添加标签
到目前为止，您尝试了哪些方法来解决问题？有什么不适用于给定的方法？

标签： javascript php html css

【解决方案1】：

如果我的理解正确，您有两个单独的页面，一个标题为存档，另一个标题为主页。您希望能够突出显示当前打开的页面的名称。

我建议，由于您在两个文档上有两个页面，您应该能够将课程移动到您希望它显示的网站上的另一个选项。

<DOCTYPE HTML>
  <head>
    <style>
      .topnav a.active {
        color: (colour you pick);
      }
    </style>
  </head>
  <body>
    <div class="right-nav">
      <a href="/metrics/website/index" class="active">Home</a>
      <a href="/metrics/website/pages/archives">Archives</a>
    </div>
  </body>
</html>

【讨论】：

我创建了一个UPDATE，你可以看看那个。我只有一个包含菜单项的文件，它们重定向到不同的页面。这就是为什么我需要在单个文件中执行活动类并在选定的一次之间切换。

【解决方案2】：

你可以像这样改变类：

document.getElementById("<arcive_id>").class = "active";

【讨论】：

我需要某种 a-tag 监听器并检查是否添加了类？
不，一旦你想改变这个类，你需要使用这个，什么时候？是你的选择，我认为是一旦选择了新页面。
但我仍然需要从旧的“活动”类中删除该类。
您能否展示一个关于此的工作示例？
为了删除你可以这样做：document.getElementById("").class= '' to empty string

【解决方案3】：

纯 CSS 无法做到这一点。您将不得不更改页面的 HTML。由于我们通常不知道您使用的是 PHP 还是 CMS 之类的东西，所以纯 HTML/CSS 的唯一方法是手动添加类或编写一些动态添加类的 JavaScript。虽然我不会推荐它。

【讨论】：

让我们用 JS 或 PHP 来做吧，这取决于你
也许我的更新会有所帮助？

【解决方案4】：

由于我没有在我的页面上使用.php，因此我从文件名中删除了该部分。除此之外，我使用 PHP_SELF 的基本名称来获取当前文件的名称。如果这与菜单功能中的名称相同，则写为 active。这里唯一的问题是，如果我在不同的目录中有两个同名的文件，并将它们添加到菜单中。因为那样两者都会被突出显示，这就是为什么我添加了basename(getcwd())，以获取父目录，然后还包括应该使用它的父名称调用该函数，例如active('website/index')

<?php
function active($currect_page){
    $url = basename(getcwd())."/".str_replace(".php", "", basename($_SERVER['PHP_SELF']));
    //If filename is just "name" or "name.php"
    //Also checks which directory the file is in, to avoid highlighting multiple menu items with same name
    //$currect_page == $url :: parentFolder/fileName == parentFolder/fileName (without .php here)
    if($currect_page == $url || $currect_page == basename(getcwd())."/".basename($_SERVER['PHP_SELF'])){
        echo 'active'; //class name in css
    }
}
?>

<div class="right-nav">
    <a href="/metrics/website/index" class="<?php active('website/index'); ?>">Home</a>
    <a href="/metrics/website/pages/archives" class="<?php active('pages/archives'); ?>">Archives</a>
</div>

【讨论】：

如果您有其他解决方案，请随时编辑此答案（将等待接受此答案，直到稍后）