使用获取 url 引导活动导航 li 项目答案

【问题标题】：Bootstrap active nav li item with get urls使用获取 url 引导活动导航 li 项目
【发布时间】：2017-08-02 19:04:39
【问题描述】：

我有这个：

<ul class="nav navbar-nav">
<li><a href="?orderBy=new">Link1</a></li>
<li><a href="?orderBy=old">Link2</a> </li>
<li><a href="?orderBy=best">Link3</a></li>
<li><a href="?orderBy=worst">Link4</a></li>
</ul>

我想添加活动类，以便用户知道他在哪个页面上。我最好的想法是让 li 项目具有唯一的 id，并在 jquery 中检查 id=1 以设置带有活动类的“Link1”。即使这样可行，我还是忍不住想知道是否有更好、更优雅的解决方案？

【问题讨论】：

stackoverflow.com/q/15963757/3597276

标签： php jquery html css twitter-bootstrap

【解决方案1】：

如果你有 php，就像你的标签一样，你可以比较 $_GET 值。类似的东西：

<li <?=$_GET['order_by']=='new' ? 'class="active"' : '';?>>
<a>link</a>
</li>

【讨论】：

【解决方案2】：

我会像 cssBlaster21895 所示的那样在服务器端做，但你也可以用 javascript 在客户端做。

var links = document.getElementsByClassName('nav')[0].getElementsByTagName('a'),
    qString = window.location.search;

for (var i = 0; i < links.length; i++) {
  var link = links[i];
  if (qString == link.getAttribute('href')) {
    link.classList.add('active');
  } else {
    link.classList.remove('active');
  }
}

<ul class="nav navbar-nav">
  <li><a href="?orderBy=new">Link1</a></li>
  <li><a href="?orderBy=old">Link2</a> </li>
  <li><a href="?orderBy=best">Link3</a></li>
  <li><a href="?orderBy=worst">Link4</a></li>
</ul>

【讨论】：