Question

我的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页面，产品项应该是有效的，我的问题是如何设置＆lt; li＆gt; Product＆lt; / li＆gt; as class =“active”？

感谢您的回答。非常感谢。

Answer 1

您需要考虑如何识别哪个页面处于活动状态，然后告诉浏览器应用该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页以上。有更好，更有活力的方法。

Answer 2

我知道这是一个老问题，但如果您正在寻找基于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>

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

bootstrap：如何激活菜单？

2 个答案: