Question

我想在显示子菜单页面时突出显示mainMenu。

<ul id="nav">
            <li class="topMenu"><a class="topMenuA"  href='@Url.Action("Index", "SavedViews")'>Saved Views</a></li>
            <li class="topMenu"><a class="topMenuA" > Administration</a> 
                <ul class="subnav">
                    <li class="subMenu"> <a href=@Url.Action("Index", "ServerLogs")>Server Logs</a></li> 
           </ul>  
       </li>
       <li class="topMenu"><a class="topMenuA"> Diagnostics </a>
            <ul class="subnav">
                    <li class="subMenu"> <a href=@Url.Action("Index", "DiagOverview")>Diagnostics Overview</a></li> 
                    <li class="subMenu"> <a href=@Url.Action("TableView", "DiagOverview")>Diagnostics Table View</a></li> 
                    <li class="subMenu"> <a href=@Url.Action("ERData", "DiagOverview")>Event Recorder Data</a></li> 
            </ul>
           </li>          
</ul>

在每页的底部，我定义了pageTheme，例如：

<script>
    pageTheme = "Administration";
    pageName  = "Location";
</script>

我遇到以下代码的错误，以突出显示目的：

$(document).ready(function () {
    $("#nav li.topMenu").removeClass("menuActive");
    $("#nav li.topMenu").filter(function (index) {
        return $(this).children('.topMenuA').text() === pageTheme;
    }).addClass("menuActive");
});

我想过滤部分（试图获得精确的顶级菜单）是一个问题。我做错了什么？任何帮助/建议将不胜感激。

Answer 1

.text()不修剪空格，因此$(this).children('.topMenuA').text()不等于pageTheme，其中pageTheme = Administration，锚点看起来像这样

<a ...> Administration</a>

使用$.trim()

return $.trim($(this).children('.topMenuA').text()) === pageTheme;

Demo

通过页面主题突出显示Mainmenu

1 个答案: