根据 MVC 中的当前网页更改 li 类

【问题标题】：change li class depending on current webpage in MVC根据 MVC 中的当前网页更改 li 类
【发布时间】：2015-06-01 18:03:34
【问题描述】：

我有一个带有 _Layout 页面的 MVC 应用程序，它收集了主导航栏。

对于每个 li 类，都需要一个特定的类来突出显示当前页面。

 <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-parent-item current-menu-item page_item current_page_item">
  @Html.ActionLink("Home", "index", "Home")<i class="fa fa-home hidden-xs"></i>
 </li>

如何在当前页面上将其添加到其他 li 类，同时在浏览时将其从 Home 中删除。

【问题讨论】：

标签： jquery html css asp.net-mvc

【解决方案1】：

实现此目的的一种方法是从window.location.href 中提取 URL，通过正则表达式提取 URL 的相关部分，然后找出某种方法将其与适当的导航按钮匹配，并为该按钮指定一个类这会突出它 - 比如：

.current-page {
    background-color: yellow;
}

更简单的解决方案是将此类（或其他）添加到每个单独视图的导航链接中 - 如下所示：

// <li id="about-me-section" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-parent-item current-menu-item page_item current_page_item">

$("#about-me-section").toggleClass("current-page");
$("#home-section").toggleClass("current-page");

【讨论】：