Bootstrap 具有获取网址的活动导航栏项目

Question

我有这个：

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

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

Answer 1

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

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

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

Bootstrap 具有获取网址的活动导航栏项目

Bootstrap active nav li item with get urls

php

jquery

html

css

twitter-bootstrap