jquery - 防止散列标签上的窗口位置移动（使用 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>