1

私のタブは、href として指定されたページ #anchor-name を関連付けるという奇妙な動作をしています。ajax経由でコンテンツを取得するように設定していないため、理由はわかりません。すべてのコンテンツは通常のマークアップのページにありますが、thbs は domain/#ui-tabs-1 からコンテンツをグラデーションします

# なしで href を設定すると、コンソールに get リクエストからの 404 エラーが表示されます。

jQuery と jQuery UI はどちらも実際のバージョンです。

誰かがこの振る舞いに気づいたことがありますか?

4

3 に答える 3

1

ヘッダーに base タグを設定することに問題があるようです。

<base href="...">

私が見つけたいくつかの非常に古い JQuery タブのドキュメントによると、タブ リンクの URL をアンカーではなく通常の URL に設定すると、ここで起こっているように (実際にアンカーがあったとしても)、AJAX 経由でタブ コンテンツが読み込まれます。

ベースパスを設定すると、ブラウザは、アンカーリンクが新しいベースパスと競合するため、実際のロードを行う必要があると考える可能性があります...ブラウザがそう考える理由はわかりません。

ただし、base タグを削除すると、すべてが意図したとおりに機能します。

FFのバグ？

ここを参照してください: http://forum.jquery.com/topic/problem-with-jquery-ui-tabs-and-base-tag

于 2013-07-24T13:42:45.280 に答える
0 
<div id="c2" class="csc-default">
<div id="tabs" class="ui-tabs ui-widget ui-widget-content ui-corner-all">
    <ul id="tab-menu" class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all" role="tablist">

            <li class="ui-state-default ui-corner-top ui-tabs-active ui-state-active" role="tab" tabindex="0" aria-controls="ui-tabs-1" aria-labelledby="ui-id-1" aria-selected="true">
                <a href="ui-tabs-1" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-1">Übersicht<span class="squares"></span></a>
            </li>


            <li class="ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="ui-tabs-2" aria-labelledby="ui-id-2" aria-selected="false">
                <a href="ui-tabs-2" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-2">Features<span class="squares"></span></a>
            </li>


            <li class="ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="ui-tabs-3" aria-labelledby="ui-id-3" aria-selected="false">
                <a href="ui-tabs-3" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-3">Service<span class="squares"></span></a>
            </li>


    </ul>

        <div id="ui-tabs-1" aria-live="polite" aria-labelledby="ui-id-1" class="ui-tabs-panel ui-widget-content ui-corner-bottom" role="tabpanel" style="" aria-expanded="true" aria-hidden="false">
            <section>
                ...
            </section>
        </div>

        <div id="ui-tabs-2" aria-live="polite" aria-labelledby="ui-id-2" class="ui-tabs-panel ui-widget-content ui-corner-bottom" role="tabpanel" style="" aria-expanded="true" aria-hidden="false">
            <section>
                ...
            </section>
        </div>

        <div id="ui-tabs-3" aria-live="polite" aria-labelledby="ui-id-3" class="ui-tabs-panel ui-widget-content ui-corner-bottom" role="tabpanel" style="" aria-expanded="true" aria-hidden="false">
            <section>
                ...
            </section>
        </div>


</div>

そしてそれがJSです：

  jQuery('#tabs').tabs({
show: { effect: "fade", duration: 200 },
hide: { effect: "fade", duration: 200 },
spinner: false,
create: function( event, ui ) {
  jQuery('H1').addClass('tab-heading');
},
beforeActivate: function( event, ui ) {
  $('.layout-2 .column-right').height('auto');
  $('.layout-2 .column-right article').height('auto');
},
activate: function( event, ui ) {
  var heightLeft = $('.layout-2 .column-left').height();
  var heightRight = $('.layout-2 .column-right').height();
  if (heightRight < heightLeft) {
    $('.layout-2 .column-right').height(heightLeft);
    $('.layout-2 .column-right article').height(heightLeft - 80);
  };
}

});

于 2013-03-13T07:56:59.607 に答える