タブパネル：分離パネル

TabPanelには、選択されたタブのコンテンツを表示する組み込みパネルが含まれています。ただし、このコンテンツを別の要素に表示するには、組み込みのコンテンツ要素を非表示にし、selectedIndexChangedイベントを使用してコンテンツを更新します。

例：

HTML

    <div id="theTabPanel">
        <div>
            <a>アフリカ</a>
            <div></div> <!-- コンテンツなし -->
        </div>
        <div>
            <a>アメリカ</a>
            <div></div>
        </div>
        <div>
            <a>アジア</a>
            <div></div>
        </div>
        <div>
            <a>ヨーロッパ</a>
            <div></div>
        </div>
        <div>
            <a>オセアニア</a>
            <div></div>
        </div>
    </div>
    <p></p>
    <div class="panel panel-success">
        <!-- 別のdivにコンテンツを表示します -->
        <div class="panel-heading">
            <h3 id="detachedContent" class="panel-title"></h3>
        </div>
    </div>

JavaScript

import * as wjNav from '@mescius/wijmo.nav';

    var theTabPanel = new wjNav.TabPanel('#theTabPanel', {

        // 選択されたタブのコンテンツを別のdivに表示します
        selectedIndexChanged: function (s, e) {
            var div = document.getElementById('detachedContent');
            div.innerHTML = 'タブ<b>' +
                s.selectedTab.header.textContent +
                '</b>のコンテンツ';
        }
    });

    // 組み込みのコンテンツ領域を非表示にします
    theTabPanel.hostElement.querySelector('.wj-tabpanes').style.display = 'none';
}