Question

我想为单页网站创建一个菜单，其中包含指向页面div的链接。菜单看起来像这样：

<li><a href="#home-link" title="Home">Home</a></li>
...
<div id="home-link"></div>

当我在home-link div的区域时，我想从菜单改变链接的颜色。怎么可能做那件事？

感谢您的回答和帮助。

度过愉快的一天。

Answer 1

如果link元素不是#home-link的孩子，则需要JavaScript。

这样的事情：

$('#home-link').on('hover', function () {
    $('li a').css('color', '#bada55');
});

这假设您使用的是jQuery，但与其他框架类似的方法也可以。

Answer 2

如果我从问题中假设您是否在#home-link上徘徊并且anchor的颜色应该更改，那么

$('#home-link').hover(function () {
    $('li a').css('color', 'red');
});

或者如果我假设您的页面中存在id，并且您想要更改anchor的颜色，那么

if($('#home-link').length){
    $('li a').css('color', 'red');
}

Answer 3

我发现自己（我相信是）同样的问题：我如何更改突出显示的导航链接以反映我已滚动到的区域，无论是通过使用链接还是仅通过滚动来到达在页面下？

Here's a page with a very helpful tutorial.

理论：

我们创建了一个包含href的所有导航的数组。然后我们使用滚动功能进行一些计算。我们找到section id，计算它的高度，看它是否大于或小于窗口顶部的值，如果窗口介于两者之间，我们将一个nav-active类添加到相关列表项中。我们也创建了一个条件，因为如果没有到达一个部分的顶部并且页面不能再滚动，我们想要突出显示这一部分。

相关的jQuery代码：

/**
 * This part handles the highlighting functionality.
 * We use the scroll functionality again, some array creation and 
 * manipulation, class adding and class removing, and conditional testing
 */
var aChildren = $("nav li").children(); // find the a children of the list items
var aArray = []; // create the empty aArray
for (var i=0; i < aChildren.length; i++) {    
    var aChild = aChildren[i];
    var ahref = $(aChild).attr('href');
    aArray.push(ahref);
} // this for loop fills the aArray with attribute href values

$(window).scroll(function(){
    var windowPos = $(window).scrollTop(); // get the offset of the window from the top of page
    var windowHeight = $(window).height(); // get the height of the window
    var docHeight = $(document).height();

    for (var i=0; i < aArray.length; i++) {
        var theID = aArray[i];
        var divPos = $(theID).offset().top; // get the offset of the div from the top of page
        var divHeight = $(theID).height(); // get the height of the div in question
        if (windowPos >= divPos && windowPos < (divPos + divHeight)) {
            $("a[href='" + theID + "']").addClass("nav-active");
        } else {
            $("a[href='" + theID + "']").removeClass("nav-active");
        }
    }

    if(windowPos + windowHeight == docHeight) {
        if (!$("nav li:last-child a").hasClass("nav-active")) {
            var navActiveCurrent = $(".nav-active").attr("href");
            $("a[href='" + navActiveCurrent + "']").removeClass("nav-active");
            $("nav li:last-child a").addClass("nav-active");
        }
    }
});

菜单固定在单页上 - 更改颜色

3 个答案: