e.preventDefault（）来防止锚跳跃到不工作的匿名函数的ID

Question

我有一个触发一些东西被点击元素时以下的jQuery / JS：

$(tabs).click(function(e) {
    tabs.removeClass('active');
    $(this).addClass('active');

    $(tabIDs).removeClass('js_tab_area_show');
    $($(this).attr('href')).addClass('js_tab_area_show');

    e.preventDefault();
    alert('worked');
});

tabs这里已函数之前被初始化，并选择我要定位的元素。所有的东西上面已经工作。然而，我现在想从滚动到所包含我的锚的tabs属性内与所述ID的元素禁用锚元件（即href在这种情况下）。我试着环顾四周，许多建议preventDefault()防止滚动。但是，它并没有为我工作。唯一的区别我看到大多是他们有专门用于处理从点击函数中调用点击事件命名的功能。在另一方面矿做了以上。该alert('worked')没有火灾显示，直到最后执行的代码。我做了什么错在这里？

Answer 1

href Modification

而不是通过复杂你的JavaScript / jQuery的或CSS做到以下几点。

<a href="#/">I DON't JUMP</a>

☝只需添加一个斜杠：/

如果你有一吨的链接，并没有提供给你的服务器端工具看到演示2.它有一个简单的JavaScript链接收集器。

---

演示1

h1,
h2 {
  text-align: center
}

h2 {
  font-size: 64px
}

a {
  display: inline-block;
  height: 30px;
  font-size: 24px;
  width: 40%;
  margin: 400px 0;
}

a:first-of-type {
  color: red;
  text-align: right;
}

a:last-of-type {
  color: blue;
  text-align: left;
}

<main>
  <h1>Scroll Down</h1>
  <h2>⇩</h2>
  <a href="#">Click me.<br>I JUMP.</a>
  <a href="#/">Click me.<br>I DO NOT JUMP.</a>
</main>

---

演示2

Array.from(document.querySelectorAll('a')).forEach(lnx => {
  if (lnx.getAttribute('href') === '#') lnx.setAttribute('href', "#/");
});

h1,
h2 {
  text-align: center
}

h2 {
  font-size: 64px
}

main {
  margin: 400px auto;
}

a:nth-of-type(odd) {
  background: #000;
  color: #fff;
}

a:nth-of-type(even) {
  color: #000;
}

<h1>Scroll Down</h1>
<h2>⇩</h2>
<main>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
</main>