2

JqueryタブのUIに問題があります。

<script type="text/javascript">
$(document).ready(function() {
    $('.tabs').tabs();
    $('.subtabs').tabs();
});

<div class="tabs">
   <ul>
       <li><a href="#tab1">Tab1</a></li>
       <li><a href="#tab2">Tab2</a></li>
   </ul>
       <div id="tab1">
            <div class="subtabs">
                <ul>
                    <li><a href="#subtab1">Subtab1</a></li>
                    <li><a href="#subtab2">Subtab2</a></li>
                </ul>
            <div id="subtab1">
                 Some content1
            </div>
            <div id="subtab2">
                 Some content2
            </div>
            </div>

        </div>
       <div id="tab2"></div>
</div>

これで、page.html＃subtab1のようなサブタブにアクセスしようとすると機能しませんが、page.html＃tab1は機能します。私は何が間違っているのですか？基本的に私はURLを使用してサブタブを開く必要があります。

ありがとう

4

2 に答える 2

1

<div id="tab2"></div>jQuery例外を発生させる欠落があります。それをコードに追加してみてください。リンクが機能します。

于 2012-06-11T08:19:57.920 に答える
1

私も同じ問題を抱えていました。そして、私はそれに対するJS修正を見つけました。この例では、最初のタブにサブタブがあり、最初のタブがデフォルトのタブであることに注意してください。私の修正により、サブタブをメインタブの任意のコンテンツ内に配置できます。実例については、プランカーを確認してください。

http://run.plnkr.co/plunks/Wr91Bm/#subtab2

関数を作成し、openParentTab()作成した直後にこれを呼び出しました$('.tabs, .subtabs').tabs();

function openParentTab() {
    locationHash = location.hash.substring( 1 );
    console.log(locationHash);
    // Check if we have an location Hash
    if (locationHash) {
        // Check if the location hash exsist.
        var hash = jQuery('#'+locationHash);
        if (hash.length) {
            // Check of the location Hash is inside a tab.
            if (hash.closest(".tabContent").length) {
                // Grab the index number of the parent tab so we can activate it
                var tabNumber = hash.closest(".tabContent").index();
                jQuery(".tabs.fix").tabs({ active: tabNumber });
            }
        }
    }
}

大きなページがあり、フォーカスが正しいサブタブにない場合は、以下を追加できますjQuery(".tabs.fix").tabs({ active: tabNumber });

hash.get(0).scrollIntoView();
setTimeout(function() {
    hash.get(0).scrollIntoView();
}, 1000);

コードを参照してください：http：//plnkr.co/Wr91Bm

于 2015-01-14T15:08:35.833 に答える