javascript - 如何防止散列标签链接滚动页面？

Question

这简直让我抓狂。我正在为一个项目构建一个非常定制的 slider 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()。我也试过返回错误。没有运气。有什么想法吗？

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="#"的方向，因此避免您现在遇到的问题。

祝你好运。