Question

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

我设法在主页上做了，但现在我有其他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文件来解决这个问题，每个页面都有不同的默认margin-top值，但是这样我就不会学到任何新东西了，我正在让这个网站练习。

提前致谢，多布里察

Answer 1

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

在$（document）.ready（）;

的开头声明var top

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

并运行您正在使用的脚本，将箭头设置为该位置的动画。

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

将jquery菜单动画重置为当前选定的菜单选项

1 个答案: