Question

我有一个sitemap.php，这是＆＃34; <?php include 'sitemap.php'; ?>＆＃34;包含在每个页面上。在我做这个之前，我在每个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

您可以在页面准备就绪后立即获取没有标题或尾随部分的网址页面。你可以用新类标记你最接近的元素：

＆＃13;

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

＆＃13;

li.active {
  color: #ffff00;
}

＆＃13;

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

＆＃13;

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

1 个答案: