按页面主题突出显示主菜单答案

【问题标题】：Highlight Mainmenu by the pageTheme按页面主题突出显示主菜单
【发布时间】：2014-06-17 01:50:32
【问题描述】：

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

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

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

【问题讨论】：

部分href在这段代码中没有分隔。

标签： jquery menu highlight

【解决方案1】：

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

<a ...> Administration</a>

使用$.trim()

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

Demo

【讨论】：

哇 Popnoodles，你太棒了。这样就解决了问题。