如何在母版页菜单中突出显示活动页面?
Posted
技术标签:
【中文标题】如何在母版页菜单中突出显示活动页面?【英文标题】:How to highlight active page in a masterpage menu? 【发布时间】:2013-06-08 06:23:00 【问题描述】:我在masterpage
(在 ASP.NET 网站中)中有一个菜单,我想在母版页菜单和子菜单中突出显示活动页面。
html:
<ul id="nav" class="sf-menu">
<li class="current-menu-item"><a href="index.html">Home</a></li>
<li><a href="page.html">menu-2</a>
<ul>
<li><a href="page-full.html">full</a></li>
<li><a href="page-features.html">featurs</a></li>
<li><a href="page-typography.html">typography</a></li>
</ul>
</li>
</ul>
CSS:
#nav>li.current-menu-item>a,
#nav>li.current_page_item>a
color: #fe8300;
提前致谢。
【问题讨论】:
在母版页中编写一个 javascript 函数以突出显示所需的菜单项。现在从 aspx 页面调用该函数(在文档准备就绪时)。 谢谢@mshsayem,这是唯一的方法吗? 【参考方案1】:有很多方法可以做到这一点。有一些简单的和一些丑陋的hacky:
解决方案 1: 使用菜单控件。标准的 .NET 菜单控件有一个简单的解决方案来做到这一点。在我看来,这是最干净和最快的解决方案。看看this 的帖子。如果您选择此解决方案,它可能会对您有所帮助。
解决方案 2: 您可以使用某种 javascript 来突出显示当前项目。如果您不想自己编写所有内容,那么 jQuery 会让这一切变得更容易。对于此解决方案,请查看 this 页面。它已经过时但仍然有效。
解决方案 3:
这是一个丑陋的解决方案,您可以通过多种不同的方式做到这一点:您可以将 <a>
元素更改为 HyperLink 控件,并在单击它们时设置某种会话或 cookie。设置后,您可以根据 cookie 的值更改样式。
还有更多方法可以解决这个问题,但我认为前两个解决方案会对你有所帮助。
【讨论】:
【参考方案2】:检查您的 url 并获取 html 文件名,然后比较它并在母版页中设置您的 css 类,或者单独制作一个菜单 UserControl,然后将其放在母版页上。
您必须将锚标记更改为超链接
asp.net 标记:
<li><asp:HyperLink runat="server" ID="lnk_full" NavigateUrl="page-full.html" Text="full" /></li>
<li><asp:HyperLink runat="server" ID="lnk_features" NavigateUrl="page-features.html" Text="features" /></li>
<li><asp:HyperLink runat="server" ID="lnk_typography" NavigateUrl="page-typography.html" Text="typography" /></li>
代码隐藏:
protected void SelectMenu()
try
string page = Path.GetFileNameWithoutExtension(Request.AppRelativeCurrentExecutionFilePath);
string pageDirectory = Path.GetDirectoryName(Request.AppRelativeCurrentExecutionFilePath);
string category = Request.QueryString.Count>0 ? Request.QueryString[0] : string.Empty;
if (pageDirectory.Length > 3)
pageDirectory = pageDirectory.Substring(2, pageDirectory.Length - 2);
if (pageDirectory != null && pageDirectory.Length > 0 && page != null && page.Length > 0)
switch (pageDirectory)
case "Secure\\Clients":
switch (page)
case "page-full":
lnk_full.CssClass = "current-menu-item";
break;
case "page-features":
lnk_features.CssClass = "current-menu-item";
break;
case "page-typography":
lnk_typography.CssClass = "current-menu-item";
break;
break;
catch (Exception ex)
throw ex;
如果您的网页位于根目录中,则不要切换到pageDirectory
。如果您使用的是查询字符串,那么您可以切换为category
。希望对您有所帮助。
【讨论】:
【参考方案3】:最后我用jQuery
解决了我的问题:
var str=location.href.toLowerCase();
$("#nav li a").each(function()
if (str.indexOf($(this).attr("href").toLowerCase()) > -1)
$("li.current-menu-item").removeClass("current-menu-item");
$(this).parent().addClass("current-menu-item");
);
$("li.current-menu-item").parents().each(function()
if ($(this).is("li"))
$(this).addClass("current-menu-item");
);
【讨论】:
完美。谢谢。【参考方案4】:$(function ()
$(".navbar‐btn a").each(function ()
var hreff = this.href.trim().split("/").splice(3, 4);
if (hreff.length > 1)
hreff.splice(0, 1);
if (hreff[0] == window.location.pathname.split("/").splice(1, 1)[0])
$(this).parent().addClass("active");
);
)
【讨论】:
【参考方案5】:jQuery(document).ready(function()
var str = location.href.toLowerCase();
jQuery('#topnav li a[href=\'' + str + '\']').addClass('active');
);
【讨论】:
虽然这可能会回答问题,但请解释为什么您的答案更好/旧(已接受)答案的改进版本。这是为了帮助其他人以后偶然发现这个答案...... 对此我很抱歉,只是为了添加写旧答案的选项,【参考方案6】:这对我来说在开发期间和本地都很好,但是当我在 IIS 上托管它时,菜单上的活动突出显示不起作用。我在这里想念什么? 母版页代码如下
$(document).ready(function ()
//You can name this function anything you like
function activePage()
//When user lands on your website location.pathname is equal to "/" and in
//that case it will add "active" class to all links
//Therefore we are going to remove first character "/" from the pathname
var currentPage = location.pathname;
var slicedCurrentPage = currentPage.slice(1);
//This will add active class to link for current page
$('.nav-link').removeClass('active');
$('a[href*="' + location.pathname + '"]').closest('li').addClass('active');
//This will add active class to link for index page when user lands on your website
if (location.pathname == "/")
$('a[href*="index"]').closest('li').addClass('active');
//Invoke function
activePage();
);
【讨论】:
以上是关于如何在母版页菜单中突出显示活动页面?的主要内容,如果未能解决你的问题,请参考以下文章
如何在母版页中调用jquery ui autocomplete以在内容页面中定义控件