如何在主页面菜单中突出显示活动页面？

Question

我可以帮忙翻译。这是一段关于编程的内容，讲述如何在ASP.NET网站中的主页面菜单和子菜单中突出显示活动页面。以下是需要翻译的内容:

我的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;
}

感谢您的提前帮助。

- mehdi

---

编写一个JavaScript函数在主页面中以突出显示所需的菜单项。现在从aspx页面调用该函数（在文档准备就绪时）。 - mshsayem

Answer 1

最终我通过使用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");
        }
    });

- mehdi

---

完美。谢谢。 - Srinivasa Rao

Answer 2

有很多方法可以实现这个功能。有一些简单的方法和一些不太好看的hacky方法: 解决方案1: 使用菜单控件。标准的.NET菜单控件有一个易于实现此功能的解决方案。在我看来，这是最干净、最快速的解决方案。请参考此文章。如果您选择这种解决方案，它可能会帮助您。 解决方案2: 您可以使用某种JavaScript来突出显示当前项。如果您不想自己编写所有内容，jQuery将使其更加容易。有关此解决方案，请参见此页面。它已过时但仍然有效。 解决方案3: 这是一种比较丑陋的解决方案，您可以用许多不同的方式来实现：您可以将元素更改为HyperLink控件，并在单击它们时设置某种会话或Cookie。设置后，您可以根据Cookie的值更改样式。

还有更多的方法可以解决这个问题，但我认为前两个解决方案会对您有所帮助。

- colosso

Answer 3

检查您的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>

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;
        }
    }

如果您的网页位于根目录，则不要切换到pageDirectory。如果您使用查询字符串，则可以切换到category。希望这能帮到您。

- Ali Umair

Answer 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");
        });
    })

- Dionny Prensa

Answer 5

这在开发和本地环境下对我来说运行良好，但是当我将其托管到IIS上时，菜单上的活动高亮显示不起作用。我错过了什么吗？ 以下是Masterpage代码

$(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();
    });

- user9961

Answer 6

jQuery(document).ready(function() {
  var str = location.href.toLowerCase();
  jQuery('#topnav li a[href=\'' + str + '\']').addClass('active');
});

- Fuad Hasan

---

虽然这可能回答了问题，但请解释为什么您的答案更好/是旧答案的改进版本。这有助于后来遇到此答案的其他人... - Mathlight

非常抱歉，只是为了添加编写旧答案的选项。 - Fuad Hasan