我目前正在使用jQuery BBQ hashchange 插件来生成哈希更改,这样当我的内容 div 动画时,我就有后退按钮功能。我找到了一个教程,它为我提供了我想要的功能,但我无法让我的菜单指示它在哪个哈希上。
这是我的基本代码:
HTML
<ul class="tabNavigation">
<li>
<a class="" href="#Contact">
contact
</a>
</li>
<li>
<a class="" href="#Portfolio">
portfolio
</a>
</li>
<li>
<a class="" href="#Services">
services
</a>
</li>
<li>
<a class="" href="#About">
about
</a>
</li>
<li>
<a href="#Landing" class="selected">
home
</a>
</li>
</ul>
jQuery
$(window).bind('hashchange', function () {
var hash = window.location.hash || '#Landing';
$(".Content").animate({marginTop: "1500px"}, '500',
function(){tabContainers.hide().filter(hash).show(), function(){}});
$(".Content").animate({marginTop: "0px"}, '500');
$("ul.tabNavigation a").removeClass("selected");
$("a[hash=" + hash + "]").addClass("selected");
});
CSS
ul.tabNavigation li
{
position: relative;
display: inline-block;
float: right;
font-family: "Baskerville";
font-size: 18px;
list-style-type: none;
text-align: left;
margin-top: 0;
}
ul.tabNavigation li a
{
display: inline-block;
text-decoration: none;
color: white;
margin-right: 5px;
margin-top: 0;
}
ul.tabNavigation li a:hover
{
display: inline-block;
text-decoration: none;
color: #91A493;
margin-right: 5px;
}
ul.tabNavigation li a.selected
{
color: blue;
}
我已经设置了脚本,以便在页面加载时选择“主页”,它应该显示为蓝色。单击链接后,“已选择”类将按原样删除,但 $("a[hash=" + hash + "]").addClass("selected"); 行 似乎什么也没做,我终其一生都无法弄清楚原因。我仔细研究了教程上的代码,看到它工作,但它在我的页面上不起作用。我真的很感激另一双眼睛……我敢肯定在这一点上这是愚蠢的。谢谢你的帮助。
编辑 - 删除了标记和 CSS 中的一些无关信息。