Как предотвратить скачок страницы при использовании вкладок 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 вкладки с добавлением и удалением (по аналогии с этим: http://jqueryui.com/tabs/#manipulation), но с содержимое каждой страницы, вытаскиваемой через Ajax (похоже на это: http://jqueryui.com/tabs/#ajax).

Все это прекрасно работает, когда я добавляю новую вкладку, браузер переходит в начало страницы. Этот прыжок только возникает, когда я добавляю новую вкладку - если я нажимаю между различными вкладками позже, она вообще не прыгает.

Я попытался использовать preventDefault() и return false на якорях, но это, похоже, не влияет на их поведение. URL-адреса якорей - это фактические ссылки без hashtags.

Работа устанавливает высоту контейнера вкладок на что-то очень большое. Это позволяет мне открывать вкладки без появления перехода ... но это не кажется очень изящным решением. Я должен указать, что вкладки имеют разные высоты, поэтому я не могу определить фиксированную высоту.

Это все, что есть на эту тему, или есть что-то, что я, возможно, пропустил?

Вот код, я использую (в основном скопированы и вставлены в документации 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++; };