使用一个站点地图突出显示当前页面

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

只要页面准备就绪，您就可以获得没有标题或尾随部分的网址页面。 你可以用新类标记你最近的元素：

 $(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>