Question

我有两个用于创建标签的空锚链接<a href="#">。请看看我的jsFiddle：

https://jsfiddle.net/MrSnrub/cuuy5cbp/

问题是当用户从标签转到标签时，用户会转到页面的最顶层。我会使用jQuery-UI的选项卡，但每个选项卡都有相同的HTML元素，并且认为jQuery-UI的选项卡会强制您在每个选项卡中使用不同的HTML元素。

我希望在我的页面下方进一步使用这些选项卡，并在每个选项卡切换不方便用户之后向下滚动用户。我该如何解决这个问题？

更新：如果我点击“标签1”将其激活，我就无法点击键盘上的标签键，标签2现在会突出显示。

Answer 1

使用<a href="javascript:void(0)">。

https://jsfiddle.net/obybyvds/

这里有explanation为何起作用

Answer 2

您可以使用$(function(){ $('#map').vectorMap({ map: 'world_mill', zoomMin: 0.9, focusOn: { x: 0.5, y: 0.5, scale: 0.9 }, }); });。它应该防止这种行为发生。

Answer 3

您可以将href设置为javascript:;

<a href="javascript:;">Tab 1</a>

或使用此 JavaScript 保持href="#"并点击event.preventDefault()：

[].forEach.call(document.querySelectorAll("[href='#']"), function(el) {
  el.addEventListener("click", function(e){
    e.preventDefault();
  }, false);
});

^jsFiddle

或 jQuery ：

$(document).on("click", "[href='#']", function(e) {
  e.preventDefault();
});

单击空锚链接会将用户发送到页面顶部

3 个答案: