asp.net-mvc - 如何进行活动菜单文本颜色更改导航下拉项子菜单?
问题描述
我希望在页面加载后重定向时更改活动菜单的颜色。重定向到页面后更改颜色的页面名称使用我的布局导航下拉项目类,因此需要此功能效果下拉子菜单。
我必须动态执行此操作,并且需要导航栏下拉项效果,我该怎么做?
<div class="header-navbar"role="navigation" data-menu="menu-wrapper">
<!-- Horizontal menu content-->
<div class="navbar-container" data-menu="menu-container">
<!-- include ~/includes/mixins-->
<ul class="nav navbar-nav" id="main-menu-navigation" data-menu="menu-navigation">
<li class="dropdown nav-item" data-menu="dropdown">
<a class="dropdown-toggle nav-link" href="#" data-toggle="dropdown"><i class="ft-book"></i><span>Dergi</span></a>
<ul class="dropdown-menu">
<li data-menu="">
<a class="dropdown-item" href="@Url.Action("Create", "News")"
data-toggle="dropdown"> Create News
<submenu class="name"></submenu>
</a>
</li>
</ul>
</li>
</div>
解决方案
您可以使用项目的根命名空间制作 html 扩展方法:
using System.Web.Mvc;
namespace YourProjectNamespace
{
public static class HtmlHelpers
{
public static string IsActive(this HtmlHelper html, string url)
{
var current = html.ViewContext.HttpContext.Request.Url.AbsolutePath.ToString().ToLower();
if (url == "/")
{
if (current == "/" || current == "/home" || current == "/home/index" || current == "/home/" || current == "/home/index/")
{
return "active";
}
else
return "";
}
if (current.Contains(url.ToLower()))
{
return "active";
}
return "";
}
}
}
然后在您的 html 中使用它,如下所示:
<li data-menu="">
<a class="dropdown-item" href="@Url.Action("Create", "News")"
data-toggle="dropdown" class="@Html.IsActive("/News/Create")" > Create News
</a>
</li>
这会将active
类添加到当前菜单项。
推荐阅读
- sql - 获取特定列组合的第一次出现
- javascript - 如何将多个 RowDataPacket 推入一个数组
- javascript - lodash 发现在 Angular 项目中不起作用
- javascript - 使用 google 不可见的 recaptcha 图标的问题
- nginx - 让 NGINX 服务于 .hbs 文件
- javascript - 将 id 属性添加到 FormControl 元素或父 Angular 7
- angular - Angular 8 + IE 11:遗漏了一些 polyfill
- python - 在 PySpark 的 DataFrame 列中存储 DenseVector
- c# - 在 UWP 中从后台线程访问 UI 的正确方法
- php - 在 laravel 中发送电子邮件的最大收件人数是多少?