Html 如何在主页菜单中突出显示活动页面？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17060426/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to highlight active page in a masterpage menu?
提问by mehdi
I have a menu inside a masterpage(in a ASP.NET Web site), and i want to highlight active page in masterpage menu and submenus.
我在masterpage（在 ASP.NET 网站中）有一个菜单，我想突出显示母版菜单和子菜单中的活动页面。
HTML:
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:
CSS：
#nav>li.current-menu-item>a,
#nav>li.current_page_item>a{
color: #fe8300;
}
thanks in advance.
提前致谢。
回答by mehdi
finally i solved my problem with using jQuery:
最后我使用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");
}
});
回答by colosso
There are many ways to do this. There are some easy and some ugly hacky ones:
有很多方法可以做到这一点。有一些简单的和一些丑陋的hacky：
Solution 1:Use a Menu Control. The standard .NET Menu Control has an easy solution to do this. This is the cleanest and fastest solution in my opinion. Have a look at thispost. Maby it'll help you if you choose this solution.
解决方案 1：使用菜单控件。标准的 .NET 菜单控件有一个简单的解决方案来做到这一点。在我看来，这是最干净、最快的解决方案。看看这个帖子。Maby 如果您选择此解决方案，它将为您提供帮助。
Solution 2:You coud use some sort of javascript to highlight the current item. jQuery would make that easier if you dont want to write everything by yourself. For this solution have a look at thispage. It's outdated but still effective.
解决方案 2：您可以使用某种 javascript 来突出显示当前项目。如果您不想自己编写所有内容，jQuery 会使这变得更容易。对于此解决方案，请查看此页面。它已经过时，但仍然有效。
Solution 3:This is kinda ugly solution and you can do that in many different ways: You could change the <a>elements to HyperLink controls and set some sort of session or cookie when you click on them. When set you could change the style based on the value the cookie has.
解决方案 3：这是一个有点丑陋的解决方案，您可以通过多种不同的方式来实现：您可以将<a>元素更改为 HyperLink 控件，并在单击它们时设置某种会话或 cookie。设置后，您可以根据 cookie 的值更改样式。
There are even more ways you could solve this but I think the first two solutions will help you.
有更多方法可以解决此问题，但我认为前两种解决方案会对您有所帮助。
回答by Ali Umair
check your url and get the html file name then compare it and set your css class in master page or make a menu UserControl seperate and then put it on master page.
检查您的 url 并获取 html 文件名，然后比较它并在母版页中设置您的 css 类，或者将菜单 UserControl 分开，然后将其放在母版页上。
You have to change your anchor tag to Hyperlinks
您必须将锚标记更改为超链接
asp.net markup :
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>
Codebehind :
代码隐藏：
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;
}
}
If your webpages are in root directory then don't switch for pageDirectory. and if you are using querystrings then you can switch for category. Hope this is helps you.
如果您的网页在根目录中，则不要切换为pageDirectory. 如果您使用的是查询字符串，那么您可以切换为category. 希望这对你有帮助。
回答by Dionny Prensa
$(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");
});
})
回答by user9961
This works fine for me during development and in local, but when I host it on IIS the active highlighting on the menu does not work. What am I missing here? Masterpage code below
这对我在开发过程中和在本地运行很好，但是当我在 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();
});
回答by Fuad Hasan
jQuery(document).ready(function() {
var str = location.href.toLowerCase();
jQuery('#topnav li a[href=\'' + str + '\']').addClass('active');
});
