Question

相关网页示例 - http://brettcolephotography.com/search.html

此页面 - “搜索” - 是我的顶级菜单中“库”下的下拉项。

我正在使用此片段突出显示当前的导航项目，并且效果很好（感谢Joe！）

$(document).ready(function(){
    var loc = window.location.href.replace(window.location.hash, '');
    $('#bcp-nav a').each(function(index) {
        if(this.href.trim() == loc)
            $(this).addClass("selected");
    });
});

我还使用动态驱动器中的热门anylink js菜单脚本来为导航下拉列表提供支持。

我想将当前突出显示的状态传递到子菜单中的项目，这样在这种情况下，当您在此搜索页面上时，“库”topnav项会突出显示。我想实现一个结构，以便我可以应用于所有类似的情况。

此示例的菜单内容文件代码

var anylinkmenuLIBRARY={divclass:'anylinkmenu', inlinestyle:'', linktarget:''} //Second menu variable. Same precaution.
anylinkmenuLIBRARY.items=[

    ["galleries", "http://brettcole.photoshelter.com/gallery-list"],
    ["search", "http://brettcolephotography.com/search.html"],
    ["advanced search", "http://brettcole.photoshelter.com/search-page"],
    ["lightbox", "http://brettcolephotography.com/lightbox.html"]
     //no comma following last entry!
]

并挂钩到相应的li，在本例中为

<li><a href="http://brettcole.photoshelter.com/gallery-list" class="menuanchorclass" rel="anylinkmenuLIBRARY">library</a></li>

非常感谢！

Answer 1

这应该有所帮助：

在menucontents.js更改中进行以下更改：

anylinkmenuINDIA={divclass:'anylinkmenu'
// to
anylinkmenuINDIA={divclass:'anylinkmenuINDIA'

anylinkmenuPROJECTS={divclass:'anylinkmenu'
// to
anylinkmenuPROJECTS={divclass:'anylinkmenuPROJECTS'

等等。基本上，使divclass与对象名称相同。然后更新anylinkmenu.css，以便正确设置新类的样式。第14行将成为：

.anylinkmenuINDIA, .anylinkmenuPROJECTS, /* your other classes here */ {

然后你可以使用它：

$(document).ready(function () {
    var loc = window.location.href.replace(window.location.hash, '');
    $('#bcp-nav a, div[class^="anylinkmenu"] a').each(function (index) {
        if (this.href.trim() == loc) {
            var linkClass = $(this).closest('div').get(0).className;
            if (linkClass.indexOf("anylinkmenu") > -1) {
                $('#bcp-nav a[rel="' + linkClass + '"]').addClass("selected");
            }
            $(this).addClass("selected");
        }
    });
});

现已在您的网站上测试并运行。

jQuery current-menu-item-highlight与js anylink菜单串联

1 个答案: