使用jQueryajax选项卡时，如何防止页面跳转

Question

我很感激这个话题上有很多问题，我怀疑有些问题真的很接近我想要的，例如。JQuery UI选项卡导致屏幕"；跳转"
点击时是否停止jquery TABS向上跳跃/滚动
Jquery选项卡：如何在单击时停止跳转？

但我还没有找到一个能完全解决我问题的。。。

我已经通过添加和删除实现了jQuery选项卡（类似于：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++;   };