0

我正在为我的网站制作这样的导航菜单：有导航、箭头和主要内容。当您加载页面时，箭头指向导航中的主页选项，当您将鼠标悬停在其他选项上时，它会移动到当前悬停的选项，当鼠标离开导航时，它会返回主页选项。

我设法在主页上做到了，但现在我在其他 6 个页面上遇到了问题。我不知道如何使箭头始终返回具有 href="#" 的导航选项，而不是始终返回主页选项。导航是垂直的。

这是我的代码：

$(document).ready(function() {

$('#arrow').css({'marginTop' : top});

$('ul li h3').hover(function(){

     var top = $(this).parent().position().top; //getting margin-top value of hovered element


$('#arrow').stop().animate({
    'marginTop' : top-115 //setting margin top,and removing 115px for aesthetics 

    });
},function(){
    $('#arrow').stop().animate({
    'marginTop' : 10 //here i set margin-top to 10 because that is where home option is
    })
});
});

我知道我可以通过为每个页面制作不同的默认边距顶部值的 .js 文件来解决这个问题，但这样我就不会学到任何新东西，我正在制作这个网站来练习。

在此先感谢，多布里卡

4

1 回答 1

0

没有测试它，但如果不工作，它可能会非常接近。

在 $(document).ready() 的开头声明 var top；

var top = $('ul li h3 a[href=#]').position().top;

并运行您用于将箭头设置为动画到该位置的脚本。

基本上，您在 href 值中选择带有“#”的锚点，您得到它的顶部并将其设置为初始顶部值

于 2012-11-23T12:42:11.767 回答