0

このトピックに関する多くの質問があることを感謝します。たとえば、 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++;   };
4

1 に答える 1