在Hash标签上防止窗口位置移动（使用Jquery选项卡）

Question

好吧，我知道很多以前提出的问题，讨论这个话题但是我很茫然而且无法弄明白。

我的问题是，当我点击每个标签链接时，整个浏览器窗口会移动到标签内容div的锚点，就像您期望的那样，例如scrollTop链接。 有谁知道快速修复？

我正在使用这样的基本选项卡结构：

<div id="tabContaier">
  <ul>
    <li><a href="#tab1">Tab 1</a></li>
  </ul>
</div>

<div class="tabDetails">

  <div id="tab1">
    <h1>My Tab Title</h1>
    <p>Whatever goes here</p>
  </div>

</div>

我的Jquery如下：

$(".tabContents").hide();
$(".tabContents:first").show();

$("#tabContaier ul li a").click(function(){

  var activeTab = $(this).attr("href");
  $("#tabContaier ul li a").removeClass("active");
  $(this).addClass("active");
  $(".tabContents").hide();
  $(activeTab).fadeIn();
});

一如既往，任何帮助非常感谢:-)

Answer 1

我相信你的意思是当你点击一个哈希作为其href属性的锚点时跳转到页面顶部？

如果要停止此操作，则必须阻止单击处理程序上的默认操作。 这是一个例子：

$("#example").click(function(e) {

    e.preventDefault(); 

  //Add your code here
});

Answer 2

问题是您的浏览器正在关注选项卡的href ...您需要通过执行以下操作来防止这种情况：

$("#tabContaier ul li a").click(function(event){
   // your code
   event.preventDefault();
});

这里有event.preventDefault（）的文档

Answer 3

尝试这个，如果它不起作用，让我

<div id="tabContaier">
  <ul>
    <li><a href="#tab1" onclick="return false;">Tab 1</a></li>
  </ul>
</div>