jquery - 外部ページから Jquery UI タブにリンクすると、ページの下部にスクロールします

Question

外部ページからjqueryuiタブにリンクするとき、私は使用します

<a href="page.html#tab-3">link</a>

これは、ほとんどの場合、それぞれのタブが表示された状態でページが読み込まれるため、正常に機能します。

これらのタブの 1 つに多くのコンテンツがあると、問題が発生します。ページが最初に読み込まれると、jquery スタイルなしで (長い線形リストとして) タブのコンテンツが読み込まれ、次に jqueryui スタイルが読み込まれますが、ページの一番下までスクロールされます。

ページの読み込み時に #tab-3 ID/NAME があるため、ページの一番下までスクロールされることを理解しています。リンク先の ID ではなく、親タブグループにリンクするにはどうすればよいですか?

実際には、タブグループの上に約 50px スクロールして、訪問者がどのタブが選択されているかを確認できるようにしたいと考えています。

jquery 1.10.2 と jquery-ui-1.10.3 を使用しています。

score 3 · Accepted Answer

ページが最初にロードされると、jquery スタイルなしでタブのコンテンツがロードされます (長い線形リストとして)。

まず、その読み込みの問題を解決しましょう...

タブをもう少しうまくロードするための簡単な回避策はdisplay: none;、タブの親に設定し、.show()すべてがうまくロードされたら、タブを使用して表示することです。

#tabs {
    display:none;
}

 $(function () {
     $("#tabs").show().tabs();
 });

主な問題に移りましょう...驚くべきことに、これはタブのコンテンツに負の上部マージンとパディングを追加することで簡単に解決できます

.ui-tabs .ui-tabs-panel {
    padding-top: 65px;
    margin-top: -50px;
}

基本的に、負のマージンでパネルを引き上げてから、パディングでパネル内のコンテンツを押し下げます。これにより、パネルの上部がタブウィジェットの上部に移動し、タブを指定してページに移動するときに、タブリンクが快適に表示されるという嬉しい副作用が得られます。

2 に答える 2