1つのサイトマップで現在のページを強調表示

Question

すべてのページに「<?php include 'sitemap.php'; ?>」というサイトマップがあります。これを作成する前に、HTMLまたはPHPサイトごとにこのサイトマップを作成しました。

だから私はこの単一のPHPファイルを保存したいと思いますが、ユーザーがリンクをクリックすると、リダイレクトされるこのサイトが強調表示されます。短く：現在のページを強調表示しますが、1つのサイトマップファイルで強調表示します。

強調するための私の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>