0

我很欣赏这个话题有很多问题，我怀疑有些问题真的很接近我想要的，例如 JQuery UI Tabs Causeing Screen to "Jump"
单击时停止 jquery TABS 跳跃/向上滚动？
Jquery标签：如何停止点击跳转？

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

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

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

我曾尝试在锚点上使用preventDefault()and 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++;   };
4

1 回答 1

0

尝试这个。

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++;   };
于 2013-07-01T11:04:02.770 回答