如何在 ASP.NET 中突出显示活动父级

Question

我有一些 JavaScript 可以将一个活动类添加到我页面上的当前菜单项。我正在使用母版页，我的代码可以正常工作，尽管它没有为父菜单项提供活动类。例如，在产品下拉菜单的页面中，我希望产品也具有活动类。因为没有人可以看到活动班级是什么，除非他们打开下拉菜单。在发布此问题之前，我已经研究了这个问题两天，但没有任何效果。有人有什么建议吗？

“头部”中的 JavaScript

        $(document).ready(function () {
            var url = window.location;
            $('#aps_menu ul.nav li a').each(function () {
                if (this.href == url) {
                    $("ul.nav li").each(function () {
                        if ($(this).hasClass("active")) {
                            $(this).removeClass("active");
                        }
                    });
                    $(this).parent().addClass('active');
                }
            });
        });

Site.Master

<div id="aps_menu" class="navbar-collapse collapse" runat="server">
    <ul class="nav navbar-nav navbar-right" runat="server">
        <li id="homepage" runat="server"><a runat="server" href="~/">HOME</a></li>
        <li id="services" runat="server"><a runat="server" href="~/Services/">SERVICES</a></li>
        <li id="drop-toggle" class="dropdown">
        <a id="products" runat="server" href="~/Products/" class="dropdown-toggle" data-toggle="dropdown">PRODUCTS <span class="caret"></span></a>
        <div class="dropdown-background">
            <div class="container">
                <div style="margin-top: 0 !important;" class="col-sm-8">
                    <ul class="col-md-6 col-sm-5" role="menu">
                        <h3>Web Development</h3>
                        <li class="DropNavLI"><strong>></strong> <a runat="server" href="~/Products/Bootstrap-Templates/"> Bootstrap</a></li>
                        <li class="DropNavLI"><strong>></strong> <a runat="server" href="#"> ASP.NET Framework</a></li>
                        <li class="DropNavLI"><strong>></strong> <a runat="server" href="#"> Basic HTML</a></li>
                        <li class="DropNavLI"><strong>></strong> <a runat="server" href="#"> Featured</a></li>
                        <li class="DropNavLI"><strong>></strong> <a runat="server" href="#"> On Sale</a></li>
                    </ul>
                    <ul class="col-md-6 col-sm-5" role="menu">
                        <h3>Graphic Design</h3>
                        <li class="DropNavLI"><strong>></strong> <a runat="server" href="#"> Abstract</a></li>
                        <li class="DropNavLI"><strong>></strong> <a runat="server" href="#"> Vector Based</a></li>
                        <li class="DropNavLI"><strong>></strong> <a runat="server" href="#"> Backgrounds</a></li>
                        <li class="DropNavLI"><strong>></strong> <a runat="server" href="#"> Featured</a></li>
                        <li class="DropNavLI"><strong>></strong> <a runat="server" href="#"> On Sale</a></li>
                    </ul>
                    <ul class="col-md-6 col-sm-5" role="menu">
                        <h3>Photography</h3>
                        <li class="DropNavLI"><strong>></strong> <a runat="server" href="#"> Animals</a></li>
                        <li class="DropNavLI"><strong>></strong> <a runat="server" href="#"> Nature</a></li>
                        <li class="DropNavLI"><strong>></strong> <a runat="server" href="#"> Landscape</a></li>
                        <li class="DropNavLI"><strong>></strong> <a runat="server" href="#"> Featured</a></li>
                        <li class="DropNavLI"><strong>></strong> <a runat="server" href="#"> On Sale</a></li>
                    </ul>
                    <ul class="col-md-6 col-sm-5" role="menu">
                        <h3>All Products</h3>
                        <li class="DropNavLI"><strong>></strong> <a runat="server" href="#"> Free</a></li>
                        <li class="DropNavLI"><strong>></strong> <a runat="server" href="#"> Featured</a></li>
                        <li class="DropNavLI"><strong>></strong> <a runat="server" href="#"> On Sale</a></li>
                        <li class="DropNavLI"><strong>></strong> <a runat="server" href="#"> Featured</a></li>
                        <li class="DropNavLI"><strong>></strong> <a runat="server" href="#"> Free</a></li>
                    </ul>
                </div>
                <div class="col-xs-7 col-sm-4" role="navigation">
                    <ul role="menu" runat="server">
                        <li runat="server"><img class="dropdown-image" style="width: 100%; margin-top: 25px;" runat="server" src="~/images/SoftwareLanguages.png" /></li>
                    </ul>
                </div>
            </div>
        </div>
        </li>
        <li id="account" runat="server"><a runat="server" href="~/Account/Manage/">ACCOUNT</a></li>
        <li id="forums" runat="server"><a runat="server" href="~/Forums/">FORUMS</a></li>
        <li id="contact" runat="server"><a runat="server" href="~/Contact/">CONTACT</a></li>
    </ul>
</div>

Answer 1

如果您的标记是嵌套的 ul 标记，我猜想按照以下方式进行操作：

$("ul.nav li").removeClass("active");
$("#aps_menu ul.nav li:has(a[href='" + window.location + "'])").addClass("active").closest("li").addClass("active");

在伪中：

• 删除所有活动标签
• 用正确的href匹配标签来查找li
• 将 active 添加到该 li 以及它嵌套在祖先树中的任何其他 li 标签。