点击子菜单时,jquery导航菜单不标记当前页面

时间:2013-10-29 04:55:04

标签: javascript jquery drop-down-menu navigationbar

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

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

当我加载页面(index.htm)时,我希望它有一个页面标记(我已命名为current)来标记我当前在主页上。当我点击另一个页面导航到 - 我希望它从prev页面删除当前并使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:加载。

1 个答案:

答案 0 :(得分:1)

你的css是错误的,你正在为a标签设置当前的id,但在css中你要设置当前的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;
}