1

我的 header.jsp 文件中有一个菜单。像这样：

<ul class="nav nav-pills">

<li  class="active"><a href="index.jsp">home</a></li>

<li><a href="product.jsp">product</a></li>

</ul>

index.jsp 和 product.jsp 都包含 header.jsp。默认情况下，Home 项目被选中并处于活动状态。当我点击产品菜单时，它导航到 product.jsp 页面，产品项应该是活动的，我的问题是如何将 <li>Product</li> 设置为 class="active"？

感谢您的回答。太谢谢了。

4

2 回答 2

0

您需要考虑如何识别哪个页面是活动的，然后告诉浏览器应用那个 li 的活动类。

一种选择是硬编码到每个页面的脚本中；

//html
<ul class="nav nav-pills">

 <li id="home"><a href="index.jsp">home</a></li>

 <li id="product"><a href="product.jsp">product</a></li>

</ul>

 <script>
 $('#product').addClass('active');
</script>

但这很耗时，特别是如果您有 6 页以上的页面。有更好和更动态的方法来做到这一点。

于 2013-10-01T12:57:24.270 回答
0

我知道这是一个老问题，但如果您正在寻找基于 jQuery 的前端解决方案，您可以执行以下操作：

$(function() {
    $('ul.nav li a[href$="' + window.location.pathname+ '"]').parent().addClass("active");
});

如果 href 属性与 URL 路径匹配，这将动态地将活动类添加到元素的父级（在您的情况下<li>） 。<a>您需要进行的更改是编写完整路径 - 所以：

<ul class="nav nav-pills">
  <li id="home"><a href="/actual/site/path/index.jsp">home</a></li>
  <li id="product"><a href="/actual/site/path/product.jsp">product</a></li>
</ul>

此解决方案不受附加到链接的哈希或查询参数的影响，因为它只检查路径。

于 2017-03-30T15:49:20.587 回答