2

导航栏看起来与我自己的不完全相同，因为我有背景图像等 - 但是导航栏本身可以完美地工作，即使在 jsfiddle 上它看起来有点时髦。

我遇到的问题是，每当我在页面上时，我的视觉标记在 jsFiddle 上都看不到，或者根本看不到，因为我无法点击其他页面）。我可以让视觉标记在我点击的特定页面上工作，但仅限于那个特定的点击，我想要实现的是一个视觉标记，无论你在哪里深入页面（无论是 ul li a 还是 ul li > ul li a 甚至 ul li > ul li > ul li a）。例如。

（需要查看 Jsfiddle 才能理解我在说什么）如果我将鼠标悬停在“Web”上，则会出现一个下拉菜单。然后我继续下到“Web-215”，那里有另一个下拉列表，我决定要导航到“jQuery”页面。

当前发生的是：当我单击“jQuery”时，该单个项目被赋予了“当前”的 ID。这改变了外观。但它只针对那个单一的项目。

我想要它做的是：如果我只点击“Web”，它会将属性添加到“Web”，但如果我点击“Web > Web-215”或该文件夹中的任何内容 - 然后它将突出显示 Web 和网络 215。而且 - 如果我单击“jQuery”，它是“Web-215”的第三级 li，那么所有三个都将选择属性“当前”。我应该选择不同的路径或链接，它应该遵循这些规则。

我不确定我需要去哪里，但这里是一个活生生的例子：http: //jsfiddle.net/knvH4/2/

这就是我认为某个地方的问题在于 jsfiddle 的 javascript 中的第 16 行

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

我需要做什么才能做到这一点，以便所有人都将被赋予“当前”的（或id）属性，而不仅仅是一个。

4

2 回答 2

1

首先要注意的是，您永远不应该在一个页面上为多个元素提供相同的 id。改用一个类。

如果您成功突出当前页面项目，但不是它的父项，您可以使用 jQuery 的closest()方法并向其添加“当前”类（这意味着更改 css 以反映一个类而不是 id）。我没有测试下面的代码，但我认为它会有所帮助：

if ($(this).attr('href') == curPage) {
    $(this).addClass('current');

    //if inside child menu, highlight parent anchor
    if($(this).closest('ul').siblings('a').length){
        $(this).closest('ul').siblings('a').addClass('current');

        //if inside grandchild menu, highlight grandparent anchor as well
        if($(this).closest('ul').siblings('a').closest('ul').siblings('a').length){
            $(this).closest('ul').siblings('a').closest('ul').siblings('a').addClass('current');
        }
    }
} else if (curPage == '') {
    $('a:first').addClass('current');
}

理想情况下，您应该将ids 添加到每个uls 中，而不是向上遍历 dom。

于 2013-10-29T15:25:35.117 回答
0

这是我想出的解决问题的方法-感谢给我意见的人！

function youAreHere() {
var pathName = $(location).attr('pathname');
var curPage = pathName.substring(pathName.lastIndexOf('/')+1, pathName.lastIndexOf('.'));
$('a').each(function() {
    var href = $(this).attr('href');
    var path = href.substring(0, href.lastIndexOf('.'));
    if(curPage.indexOf(path) !== -1) {
        $(this).addClass('current');
    } else if (curPage == '') {
        $('a:first').addClass('current');
    }
});//END function
于 2013-10-29T18:38:37.667 回答