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>

我想添加活动类，以便用户知道他所在的页面。我最好的想法是让li项具有唯一的id并在jquery中检查id = 1是否设置＆＃34; Link1＆＃34;有活跃的班级。即使这是有效的，我也不能不知道是否有更好的解决方案，更优雅的解决方案？

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活动导航项目

2 个答案: