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选项卡添加和删除（类似于：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++;   };

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

1 个答案: