如何停止带有哈希的URL从跳转到锚点? [英] How to stop URL with hash from jumping to anchor?

问题描述

我已经尝试了几乎每个人对类似问题的答案，但是这些答案并没有帮助我.因此，我将发布代码，然后再解释我的问题的更多细节.

I've tried almost everyone's answer to similar problems and the answers haven't help me. So i'll post my codes and then explain a little more details of what is my problem.

链接以在和编辑器中查看代码.
http://jsbin.com/nudavoseso/edit?html,js,output

Link to see codes in and editor.
http://jsbin.com/nudavoseso/edit?html,js,output

.html正文中的代码.

Code inside .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文件中的代码.

and code inside .js file.

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;
});

如果您查看下面的示例网址，那么一切都很好.
http://output.jsbin.com/nudavoseso

Everything works great if you go check out the example url below.
http://output.jsbin.com/nudavoseso

问题
如果您使用上方带有#content1的井号标签到同一网址，则 跳转到锚定(#content1) ，我不希望页面跳至锚定.我希望页面始终从顶部开始.仅当它是指向URL的直接链接时，才会发生这种情况.
http://output.jsbin.com/nudavoseso#content1

推荐答案

修复

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 without any hash.
http://output.jsbin.com/tojeja

带有主题标签的URL不会跳转到锚点.
http://output.jsbin.com/tojeja#content1

URL with hashtag that does not jumping to anchor.
http://output.jsbin.com/tojeja#content1

这篇关于如何停止带有哈希的URL从跳转到锚点?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！