使用 jQuery ajax 选项卡时如何防止页面跳转？

Question

我很感激有很多关于这个主题的问题，我怀疑有些问题真的很接近我想要的，例如 JQuery UI Tabs Causing Screen to "Jump"
Stop jquery TABS from jumping / scrolling up when clicked on?
Jquery tabs: How do I stop the jump on click?

但是我还没有找到一个可以完全解决我的问题...

我已经实现了带有添加和删除功能的 jQuery Tabs（类似于：http://jqueryui.com/tabs/#manipulation），但每个页面的内容都是通过 Ajax 拉取的（类似于：http://jqueryui.com/tabs/#ajax）。

这一切都很好，除了每当我添加一个新标签时，浏览器就会跳转到页面顶部。当我添加一个新选项卡时，仅会发生这种跳转 - 如果我稍后在不同的选项卡之间单击它根本不会跳转。

我尝试在锚点上使用preventDefault() 和return false，但这似乎不会影响它们的行为。锚点的 URL 是没有主题标签的实际链接。

的作用 是将标签容器的高度设置为非常大的值。这使我可以在不发生跳转的情况下打开选项卡……但这似乎不是一个非常优雅的解决方案。我应该指出，标签本身都是不同的高度，所以我不能真正确定一个固定的高度。

这就是主题的全部内容，还是我可能遗漏了什么？

这是我正在使用的代码（大部分是从 jQuery 文档复制和粘贴的）：

var tabTitle = $( "#tab_title" ),
tabContent = $( "#tab_content" ),
tabTemplate = "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close' role='presentation'>Remove Tab</span></li>",
tabCounter = 2;
var tabs = $( "#tabs" ).tabs();

function addTab(document_id, document_name) {
var label = tabTitle.val() || document_name,
id = "tabs-" + tabCounter,
li = $( tabTemplate.replace( /#\{href\}/g, 'document/'+document_id).replace( /#\{label\}/g, label ) );
tabs.find( ".ui-tabs-nav" ).append( li );
tabs.tabs( "refresh" );
tabs.tabs( "option", "active", tabCounter-1);
tabCounter++;   };

Answer 1

试试这个。

var tabTitle = $( "#tab_title" ),
tabContent = $( "#tab_content" ),
tabTemplate = "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close' role='presentation'>Remove Tab</span></li>",
tabCounter = 2;
var tabs = $( "#tabs" ).tabs();

function addTab(document_id, document_name) {
  var label = tabTitle.val() || document_name,
  id = "tabs-" + tabCounter,
  li = $( tabTemplate.replace( /#\{href\}/g, 'document/'+document_id).replace( /#\   {label\}/g, label ) );
  tabs.find( ".ui-tabs-nav" ).append( li );
  tabs.find( ".ui-tabs-nav a" ).click(function(e) {
  e.preventDefault(); 
 });
 tabs.tabs( "refresh" );
 tabs.tabs( "option", "active", tabCounter-1);
 tabCounter++;   };