Javascript 滑动导航箭头

我试图在页眉顶部创建一个滑动箭头，该箭头根据当前活动的菜单项水平滑动

编辑-我所指的作为示例的网站不再处于活动状态

加载页面时，箭头应位于正确的位置（即活动菜单项正上方）。目前，当页面加载/刷新时，我的努力使其从屏幕左侧滑入，然后在活动按钮上方停止

---

我目前正在我的网站上使用jQuery 1.8.3、Modernizer和Cycle Lite来实现各种其他功能。

下面的小提琴演示了我所了解的您正在寻找的东西：

下面是JSFIDLE javascript。在本例中，我使用边距调整了导航箭头，但您也可以轻松地将其绝对定位，并根据选项的偏移量将其移动

排列函数arr（）被添加到mouseover和mouseout事件中，这意味着可以计算导航箭头的新位置，并相应调整边距，默认选项由mouseout发送，以便箭头在默认情况下弹回

每个菜单项都添加了属性default，以便onclick事件更改要返回的默认项-尽管这假设您的链接是动态的，并且页面不会重新加载/更改到另一个页面，如果是这种情况，那么您应该只更改哪个div具有id=“d”添加到不同页面的html上的相应项，并相应地调整代码

我还添加了一个微调数组，这样您就可以将箭头放置在每个div上，精确到您喜欢的点。这些值被添加到每个菜单项的左侧位置，因此对于link1来说，其宽度为60ish，并带有填充/边距等34的微调，将导航箭头置于中心上方：

window.onload = function () {
    var fine = [36, 34, 34, 34];
    var mitms = document.getElementsByClassName('mitm');
    var l0 = (mitms[0].offsetLeft + fine[0]);
    document.getElementById("nav_arrow").style.marginLeft = l0 + "px";

    for (var i = 0; i < mitms.length; i++) {
        mitms[i].default = false;
        mitms[i].fine = fine[i];
        mitms[i].onmouseover = function () {arr(this);};
        mitms[i].onmouseout = function () {
            var tmp = document.getElementsByClassName('mitm');
            for (var j=0; j<tmp.length; j++) {
                if (tmp[j].default === true) {arr(tmp[j]); break;}
            }
        };
        mitms[i].onclick = function() {
            var tmp = document.getElementsByClassName('mitm');
            for (var j=0; j<tmp.length; j++) {tmp[j].default = false;}
            this.default = true;
        }
    }
    mitms[0].default = true;
};

function arr(el) {
    var mitms = document.getElementsByClassName('mitm');
    var l = el.offsetLeft + el.fine;
    document.getElementById("nav_arrow").style.marginLeft = l + "px";
}

由于IE还不支持css转换，我相信会有一个合适的jquery解决方案使IE转换顺利

希望有帮助

编辑

这也可以通过简单的css实现，例如：

#menuitem1:hover ~ #nav_arrow {
   margin: 0px 0px 0px 185px;
}

假设menuitem1是

<a id='menuitem1'></a>

---

和以前一样使用转换等。

Hi。谢谢几乎正是我要找的。我已经设法为我的网站修改了你的代码。然而，有几件事让我感到困惑：1）单击按钮后，“活动”按钮需要成为默认按钮，以便箭头在单击后停留在其上方-就像在我引用的网站上一样。有什么办法让它工作吗？2） 你知道一种稍微精确一点的方法来设置箭头的位置吗？您提到了绝对定位，并根据选项的偏移量移动它。我不是100%确定你的意思。这可能是我前进的方向吗利昂：微调阵列工作得很好，谢谢。但是，我在默认元素的情况下遇到了问题。“我的按钮”不是动态的，单击按钮时页面会发生更改/刷新。我已经有了一些javascript代码，可以在单击按钮并重新加载页面后动态地将类分配给按钮。您是否能够建议我如何修改您的代码，以将具有所述类的元素视为页面加载时指向的默认元素，并在mouseout时返回到该元素？我尝试过在不同的地方用“mitm”代替我的“active_class”，但没有任何运气。此外，我刚刚注意到javascript代码中的每个“default”实例都会导致IE8抛出一个嘶嘶的匹配。我在想，如果我可以用我的'active_class'来表示默认按钮，那么代码中涉及“default”的部分可能就没有必要了。这是一个合理的假设吗？对于所有的问题，我感到抱歉——我对javascript的了解充其量只是初步的。经过一番背景阅读和对您提供的代码进行一些调整，我最终成功地实现了这一点。谢谢你的帮助。我只想说，这是一个令人印象深刻的答案。干得好，CJ！

#menuitem1:hover ~ #nav_arrow {
   margin: 0px 0px 0px 185px;
}

<a id='menuitem1'></a>