使用jQuery ajax标签时，如何防止页面跳转？

Question

我感谢这个主题上有很多问题，并且我怀疑有些问题与我想要的非常接近，例如JQuery UI选项卡导致屏幕“跳转”
阻止jquery TABS在单击时跳转/向上滚动？
jQuery标签：如何停止点击跳转？

但我还没有找到能完全解决我问题的方法...

我已经实现了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++;   };