javascript - 使用一张站点地图突出显示当前页面

Question

我有一个 sitemap.php，每个页面上都包含“<?php include 'sitemap.php'; ?> ”。在我做这个之前，我在每个 HTML 或 PHP 网站上都有这个站点地图。

现在:我想保留这个单个 php 文件，但是，如果用户单击链接，他将被重定向到的该网站现在应该突出显示。简而言之:突出显示当前页面，但使用一个站点地图文件。

我的 CSS 突出显示:

li.active {
  color: #fff;
}

我想你们都知道站点地图的样子:

               <ul class="nav nav-menu">
                  <li><a href="channel.php">
                      <div class="nav-menu__ico"><i class="fa fa-fw fa-comment"></i></div>
                      <div class="nav-menu__text"><span>Channel</span></div></a></li>
                  <li><a href="products.html">
                      <div class="nav-menu__ico"><i class="fa fa-fw fa-users"></i></div>
                      <div class="nav-menu__text"><span>Groups</span></div></a></li>
                  <li><a href="groups.php">
                      <div class="nav-menu__ico"><i class="fa fa-fw fa-bars"></i></div>
                      <div class="nav-menu__text"><span>Ranking</span></div></a></li>
                  <li><a href="users.html">
                      <div class="nav-menu__ico"><i class="fa fa-fw fa-user"></i></div>
                      <div class="nav-menu__text"><span>Users</span></div></a></li>
                </ul>

我想这必须用 JS/jQuery/PHP 来完成，但我真的不知道怎么做。

Answer 1

一旦页面准备好，您就可以获取没有标题或尾随部分的 url 页面。您可以使用新类标记最接近的元素:

$(function () {
  var pageUrl = window.location.pathname.split('/').pop();
  $('a[href="' + pageUrl + '"]').closest('li').addClass('active');
});

li.active {
  color: #ffff00;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<ul class="nav nav-menu">
    <li><a href="channel.php">
        <div class="nav-menu__ico"><i class="fa fa-fw fa-comment"></i></div>
        <div class="nav-menu__text"><span>Channel</span></div></a></li>
    <li><a href="products.html">
        <div class="nav-menu__ico"><i class="fa fa-fw fa-users"></i></div>
        <div class="nav-menu__text"><span>Groups</span></div></a></li>
    <li><a href="groups.php">
        <div class="nav-menu__ico"><i class="fa fa-fw fa-bars"></i></div>
        <div class="nav-menu__text"><span>Ranking</span></div></a></li>
    <li><a href="users.html">
        <div class="nav-menu__ico"><i class="fa fa-fw fa-user"></i></div>
        <div class="nav-menu__text"><span>Users</span></div></a></li>
</ul>