Question

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

“head”中的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以及嵌套在祖先树内的任何其他li标签。

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

1 个答案: