我正在处理一个单页网站,其中包含鼠标点击链接时显示/切换的隐藏元素。 问题在于我的锚链接从一开始就设置,当我显示/展开网站的一个部分时,由于网页的新维度,其他锚链接不正确。
有任何变通方法/建议/解决方法吗?
编辑: 假设我有一个平滑的滚动功能,可以锁定到锚链接以滚动到导航栏:
-addObject
因此它切换div(显示和隐藏),因此锚点在页面上发生变化。例如//Smooth Scroll
$k(function() {
$k('a[href*="#"]:not([href="#"])').click(function() {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var target = $k(this.hash);
target = target.length ? target : $k('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$k('html, body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
//Nav Bar
<nav id="nav">
<ul>
<li><a href="#about">Hello!</a></li>
<li><a href="#services" id="wedding-toggle2">Weddings</a></li>
<li><a href="#services" id="events-toggle2">Events</a></li>
<li id="logomainli"><a href="index.html"><img src="images/puffinlogo-xsmall.png" style="vertical-align:middle !important" id="logomain"></a></li>
<li><a href="#services" id="cakes-toggle2">Cakes</a></li>
<li><a href="#services" id="catering-toggle2">Catering</a></li>
<li><a href="#services">Contact</a></li>
</ul>
</nav>
// jQuery Toggle Script:
$j('#wedding-show').click(function() {
$j('#weddingtog').show('slow');
$j('#weddingtog').addClass('active');
return false;
});
$j('#wedding-hide').click(function() {
$j('#weddingtog').hide('fast');
return false;
});