Highlight current page with one sitemap

Question

I have a sitemap.php which is " <?php include 'sitemap.php'; ?> " included on every page. Before I made this, I had this sitemap on every single HTML or PHP site.

So now: I want to keep this single php file but, if the user clicks on a link, this site he'll be redirected to should be highlighted now. Short: Highlight the current page but with one sitemap-file.

My CSS for highlighting:

li.active {
  color: #fff;
}

and I guess you all know how a sitemap looks:

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

I guess it have to be done with JS / jQuery / PHP, but I really don't know how.

Answer 1

You can get the url page without heading or trailing part and as soon as the page is ready. Than you can mark your li closest element with the new class:

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