Html 如何在母版页菜单中突出显示活动页?
我在Html 如何在母版页菜单中突出显示活动页?,html,asp.net,css,menu,master-pages,Html,Asp.net,Css,Menu,Master Pages,我在母版页中有一个菜单(在ASP.NET网站中),我想突出显示母版页菜单和子菜单中的活动页 HTML: 提前感谢。有很多方法可以做到这一点。有一些简单的,也有一些丑陋的: 解决方案1: 使用菜单控件。标准的.NET菜单控件有一个简单的解决方案。在我看来,这是最干净、最快的解决方案。看看这篇文章。如果你选择这个解决方案,也许会对你有所帮助 解决方案2: 您可以使用某种javascript来突出显示当前项。如果您不想自己编写所有内容,jQuery将使这变得更容易。有关此解决方案,请参阅第页。它已经过
母版页中有一个菜单(在ASP.NET网站中),我想突出显示母版页菜单和子菜单中的活动页
HTML:
提前感谢。有很多方法可以做到这一点。有一些简单的,也有一些丑陋的:
解决方案1:
使用菜单控件。标准的.NET菜单控件有一个简单的解决方案。在我看来,这是最干净、最快的解决方案。看看这篇文章。如果你选择这个解决方案,也许会对你有所帮助
解决方案2:
您可以使用某种javascript来突出显示当前项。如果您不想自己编写所有内容,jQuery将使这变得更容易。有关此解决方案,请参阅第页。它已经过时了,但仍然有效
解决方案3:
这是一个丑陋的解决方案,你可以用很多不同的方法来实现:你可以将
元素更改为超链接控件,并在点击它们时设置某种会话或cookie。设置后,您可以根据cookie的值更改样式
有更多的方法可以解决这个问题,但我认为前两种解决方案会对您有所帮助。检查您的url并获取html文件名,然后比较并在母版页中设置css类,或者将菜单用户控件分开,然后将其放在母版页上
您必须将锚定标记更改为超链接
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
。如果您使用的是querystring,那么您可以切换到类别
。希望这对您有所帮助。最后,我使用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");
}
});
这对我在开发期间和本地运行都很好,但是当我在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();
});
在母版页中编写javascript函数以突出显示所需的菜单项。现在从aspx页面调用该函数(在文档准备就绪时)。thx@mshsayem,这是唯一的方法?尽管这可能会回答问题,但请解释为什么您的答案更好/是旧(已接受)答案的改进版本。这是为了帮助其他人在稍后遇到这个答案…对此我很抱歉,只是为了添加一个选项,用于编写旧的答案,完美。谢谢
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");
}
});
$(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");
});
})
jQuery(document).ready(function() {
var str = location.href.toLowerCase();
jQuery('#topnav li a[href=\'' + str + '\']').addClass('active');
});
$(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();
});