このトピックに関する多くの質問があることを感謝します。たとえば、
JQuery UI Tabs Causing Screen to "Jump"
をクリックしたときに 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++; };