bootstrap：如何激活菜单？

我在我的header.jsp文件中有一个菜单。像这样：bootstrap：如何激活菜单？

<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页面，产品项目应该是活动的，我的问题是如何将class =“active”设置为<li>产品</li >？

您的回答是赞赏。万分感谢。

来源

2013-10-01 user1205398

您需要考虑如何识别哪个页面处于活动状态，并依次告诉浏览器应用那个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-01 12:57:24 Rexxo

感谢您的回答。如果不是硬编码，会更好。 – user1205398

也许可能会更好地包含一些脚本来检查当前页面是什么，检查菜单是否包含与其相匹配的ID并应用该类。可以使用此页面标题或页面上的隐藏字段。 – Rexxo

我知道这是一个老问题，但如果你正在寻找一个基于jQuery的前端解决方案，你可以这样做：

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

这将动态的主动类添加到父（在你的情况<li>）<a>元素如果href属性匹配的URL路径。你需要做的改变是写的完整路径 - 这样：

<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-30 15:49:20 Aender

bootstrap：如何激活菜单？

回答

相关问题