javascript - self 检测每个页面单击的菜单项的最佳实践是什么？

Question

如果有很多页面共享同一个菜单

    include_once('common-menu.php');

但是不同页面的菜单应该有一些不同

页面A

  <ul class="nav navbar-nav">
    <li class="active"><a href="a.php">A Page</a></li>
    <li><a href="b.php">B Page</a></li>
  </ul>

B页

  <ul class="nav navbar-nav">
    <li><a href="a.php">A Page</a></li>
    <li class="active"><a href="b.php">B Page</a></li>
  </ul>

我只知道两种解决方案。

解决方案1:服务器端检测URL然后确定输出

  <ul class="nav navbar-nav">
    <li class="<? echo 'active'; ?>"><a href="a.php">A Page</a></li>
    <li class=""><a href="b.php">B Page</a></li>
  </ul>


  <ul class="nav navbar-nav">
    <li class=""><a href="a.php">A Page</a></li>
    <li class="<? echo 'active'; ?>"><a href="b.php">B Page</a></li>
  </ul>

方案二:使用js/jquery检测URL，页面加载后通过js/jquery更改class。

解决这个问题的最佳实践是什么？

是否有任何非编程解决方案，以便我不需要使用 if/case/map 来确定事件项？

Answer 1

有一个几乎纯 CSS 的解决方案，但它并不理想。将 url 作为父 id 输出，并使用选择器来处理其余部分。这样做的缺点是，如果您需要添加大量导航项，它会变得乏味。使用上述解决方案之一会更好。

PHP

<div id="<? basename($_SERVER['SCRIPT_NAME'], ".php") ?>">
    <ul class="nav navbar-nav">
        <li><a href="a.php">A Page</a></li>
        <li><a href="b.php">B Page</a></li>
    </ul>
</div>

CSS

#a .nav a[href$='a.php'],#b .nav a[href$='b.php']{    
    color:red;
}