如何阻止 URL with hash 跳转到 anchor？

Question

我试过几乎每个人对类似问题的答案，但答案对我没有帮助。所以我会 post 我的代码，然后解释我的问题的更多细节。

Link 在编辑器中查看代码。
http://jsbin.com/nudavoseso/edit?html,js,output

代码在 .html body.

<div class="tabs">
  <ul>
    <li><a href="#content1">Tab 1</a></li>
    <li><a href="#content2">Tab 2</a></li>
    <li><a href="#content3">Tab 3</a></li>
  </ul>
</div>
<div id="content1" class="content">
  <h1>One</h1>
  <p>Content goes here</p>
</div>
<div id="content2" class="content">
  <h1>Two</h1>
  <p>Content goes here</p>
</div>
<div id="content3" class="content">
  <h1>Three</h1>
  <p>Content goes here</p>
</div>

和 .js 文件中的代码。

function tabs() {
  $(".content").hide();
  if (location.hash !== "") {
    $(location.hash).fadeIn();
    $('.tabs ul li:has(a[href="' + location.hash + '"])').addClass("active");
  } else {
    $(".tabs ul li").first().addClass("active");
    $('.tabs').next().css("display", "block");
  }
}
tabs();

$(".tabs ul li").click(function() {
  $(".tabs ul li").removeAttr("class");
  $(this).addClass("active");
  $(".content").hide();
  var activeTab = $(this).find("a").attr("href");
  location.hash = activeTab;
  $(activeTab).fadeIn();
  return false;
});

如果您查看下面的示例 url，一切都会很好。
http://output.jsbin.com/nudavoseso

问题
如果您转到上面相同的 url，最后使用主题标签 #content1，它 跳转到锚点（#content1），我不希望页面被跳转到锚点。我希望页面始终从顶部开始。只有当直接 link 到 url.
时才会发生这种情况 http://output.jsbin.com/nudavoseso#content1

Answer 1

如果您愿意对用户体验造成轻微影响，您可以检测哈希何时存在，并在没有哈希的情况下重新加载页面：

if (location.hash) {
  window.location = location.href.replace(location.hash, '');
}

Answer 2

修复

html

<div class="tabs">
  <ul>
    <li><a href="#content1">Tab 1</a></li>
    <li><a href="#content2">Tab 2</a></li>
    <li><a href="#content3">Tab 3</a></li>
  </ul>
</div>
<div class="content content1">
    <p>1. Content goes here</p>
</div>
<div class="content content2">
    <p>2. Content goes here</p>
</div>
<div class="content content3">
    <p>3. Content goes here</p>
</div>

js

function tabs(){
  $(".content").hide();

  if (location.hash !== "") {
    $('.tabs ul li:has(a[href="' + location.hash + '"])').addClass("active");
    var hash = window.location.hash.substr(1);
    var contentClass = "." + hash;
    $(contentClass).fadeIn();
  } else {
    $(".tabs ul li").first().addClass("active");
    $('.tabs').next().css("display", "block");
  }
}
tabs();

$(".tabs ul li").click(function(e) {
  $(".tabs ul li").removeAttr("class");
  $(this).addClass("active");
  $(".content").hide();
  var contentClass = "." + $(this).find("a").attr("href").substr(1);
  $(contentClass).fadeIn();
  window.location.hash = $(this).find("a").attr("href");
  e.preventDefault();
  return false;
});

URL 没有任何哈希。
http://output.jsbin.com/tojeja

URL 标签不跳转到主播。
http://output.jsbin.com/tojeja#content1

如何阻止 URL with hash 跳转到 anchor？

How to stop URL with hash from jumping to anchor?

javascript

jquery

tabs

anchor

hashtag

修复