如何避免在点击带ID的锚点时跳到顶部

Question

我创建了一个包含4张幻灯片的CSS/HTML carousel，当单击底部的按钮( href)时，它将显示所选的幻灯片。问题是，每次我点击一个链接，我都可以看到我想要的所选幻灯片，但页面会跳到顶部。我知道问题是因为我使用了ID，但我不知道如何避免页面跳转。我尝试添加这个脚本：

$('a.someclass').click(function(e) {
    e.preventDefault();
});

这是html：

<div class="slider">
    <div class="slides">
        <div id="slide-1"></div>
        <div id="slide-2"></div>
        <div id="slide-3"></div>
        <div id="slide-4"></div>
    </div>
    <a href="#slide-1" class="slide-button">Slide 1</a>
    <a href="#slide-2" class="slide-button">Slide 2</a>
    <a href="#slide-3" class="slide-button">Slide 3</a>
    <a href="#slide-4" class="slide-button">Slide 4</a>
</div>

但它不起作用。我该怎么做呢？谢谢

Answer 1

您的选择器错误。使用一个幻灯片按钮而不是a.someclass

$()必须是有效的jQuery DOM选择器

​

$('a.slide-button').click(function(e) {
    e.preventDefault();
});

.slides {
  height: 100vh;
  background-color: cyan;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="slider">
    <div class="slides">
        <div id="slide-1"></div>
        <div id="slide-2"></div>
        <div id="slide-3"></div>
        <div id="slide-4"></div>
    </div>
    <a href="#slide-1" class="slide-button">Slide 1</a>
    <a href="#slide-2" class="slide-button">Slide 2</a>
    <a href="#slide-3" class="slide-button">Slide 3</a>
    <a href="#slide-4" class="slide-button">Slide 4</a>
</div>

​