Question

这让我绝对疯了。我正在为一个项目构建一个非常自定义的滑块jQuery插件。我的一个要求是用户必须能够深入链接到特定幻灯片。所以我的幻灯片自然都有哈希标签，导航链接也有相应的标签。我的问题是，哈希标记链接的默认功能是在我的javascript触发的滑动动画之上触发的。也就是说，它不是滑动到幻灯片4而是立即跳转到幻灯片4，然后动画到幻灯片8。尽管使用了我能想到的每一个技巧来阻止默认功能。以下是相关代码片段。

$(slider.nav).bind( 'click', function(event) {
    event.preventDefault();
    if( !$(this).hasClass('active') ) {
        var target = slider.nav.index( $(this) );
        slider.animate( target );
    }
});

正如你在这里看到的，我使用了event.preventDefault（）。我也尝试过返回false。没有任何运气。有什么想法吗？

Answer 1

如果没有看到HTML，很难说。但如果这是我想象的方式，如果它不在任何地方，你不需要在链接中保留href =“＃”。您可以使用jQuery来获取下一张幻灯片，或者在不依赖于href =“＃”链接的情况下获得第7张幻灯片。

相反，您可以执行以下操作：

<ul id="slideshow">
    <li id="slide_1">Slide 1</li>
    <li id="slide_2">Slide 2</li>
    <li id="slide_3">Slide 3</li> 
</ul>

<a class="slide_nav" data-index="1">1</a>
<a class="slide_nav" data-index="2">2</a>
<a class="slide_nav" data-index="3">3</a>
<a class="slide_nav" data-index="4">4</a>

在JS中，做一些类似的事情：

$('.slide_nav').click(function() {
    var slides = $('#slideshow li'); // get all slides
    var target_id = $(this).data('id') - 1; // Get the current ID and then subtract 1 (index starts at 0)
    slider.animate(slides[target_id]);
});

无论如何，这更像是一个伪示例，而不是其他任何东西，而且我不确定它是否会按原样运行，但代码应该指向一个避免使用href =“＃”的方向，从而避免你现在遇到的问题。

祝你好运。

Answer 2

哦，jeeze。我真的很抱歉。我浪费了每个人的时间。

显然，另一位在网站上工作的开发人员已经在其他地方大致添加了一些javascript以实现

的效果

if( window.location.hash ) {
    window.location = window.location.hash;
}

不知道为什么他们会添加这样的东西。遗憾！

如何防止哈希标记链接滚动页面？

2 个答案: