小编OCD*_*OCD的帖子

我目前正在为菜单项使用以下代码:

HTML

<li>
<a id="About" class="button" href="About Us.cshtml">About Us</a>
</li>
<li style="margin-left: 30px;">
<a id="Services" class="button" href="Services.cshtml">Services</a>
</li>
<li style="margin-left: 30px;">
<a id="Contact" class="button" href="Contact Us.cshtml">Contact Us</a>
</li>

CSS

#About {background-image: url(../Buttons/About.png); width: 87px;}
#Services {background-image: url(../Buttons/Services.png); width: 112px;}
#Contact {background-image: url(../Buttons/Contact.png); width: 117px;}
a.button {height: 20px; display: inline-block; background-repeat: no-repeat}
a.button:hover {background-position: 0 -20px;}
a.button:active {background-position: 0 -40px;}

我需要让按钮在单击并加载/刷新页面后保持"活动"状态.

如果解决方案需要javascript,请记住我是业余爱好者,所以我需要外行人的任何解释(最好用例子).

我正在尝试在我的标题顶部创建一个滑动箭头,该箭头根据当前活动的菜单项水平滑动.

编辑 - 我所指的网站作为一个例子不再有效.

页面加载时(即直接位于活动菜单项上方),箭头应位于正确的位置.目前,我的努力是从页面的左侧滑入,然后在页面加载/刷新时在活动按钮上方休息.

我目前在我的网站上使用jQuery 1.8.3,Modernizr和Cycle Lite来实现各种其他功能.