单击子菜单时，jquery nav 菜单未标记当前页面

Question

这是我的 jsfiddle：http://jsfiddle.net/HhBEJ/3/

尽管有些代码在 jsfiddle 中看起来不太好，因为我有背景图像等 - 我的导航菜单有问题。 我想要它做的是：

当我加载页面（index.htm）时，我希望它有一个页面标记（我将其命名为 current）来标记我当前在主页上。当我点击另一个页面导航到 - 我希望它从上一页中删除当前页面并使 curPage 成为新的当前页面（你可以看到我在 jquery 中这样做了（我认为我做得对））如果我点击一个子菜单。例如，当我单击 javaScript 时，我转到“web > web215 > JavaScript”，我希望 Web 父 Web215 子和 javaScript 孙以“当前”ID 突出显示所有内容。但是除了我单击时的一秒钟外，它对其中任何一个都没有这样做-页面加载时它不会保存它。我认为罪魁祸首在这里的某个地方：

function youAreHere() {
var pathName = $(location).attr('pathname');
var curPage = pathName.substring(pathName.lastIndexOf('/') + 1);
$('a').each(function () {
    if ($(this).attr('href') == curPage) {
        $(this).attr('id', 'current');
    } else if (curPage == '') {
        $('a:first').attr('id', 'current');
    }
}); //END function

我知道当我发出警报时，它会正确调用页面并且按预期工作，但当前类不是 A：加载后停留或 B：完全加载。

Answer 1

您的 css 错误，您将 current 的 id 设置为 a 标签，但在 css 中您将 current 的 id 设置为 li 标签。这就是你需要的：

div#menu li a#current {
 font-weight: bold;
 font-size: 16px;
 z-index: 6;
 background: transparent url('../images/menu_level1_item.png') repeat-x scroll 0pt 100%;
}
div#menu li a#current ul {
 font-weight: normal;
 font-size: 12px;
}