1

だから、私はjsで剣道をやっています。タブストリップを使用したいのですが、スタイルが設定され、他の要素を含むヘッダーにタブを含めたいので、タブリストと関連する div を分離する方法があるかどうか疑問に思っています。私はこのようなものを探しています:

<div class="border">
  <div class="header">
    <div id="tabstriplist">
      <ul>
        <li id="tab1">First tab</li>
        <li id="tab2">Second tab</li>
      </ul>
    </div>
    <div>Some other text</div>
  </div>
  <div class="content">
    <div id="tabcontent1">Stuff</div>
    <div id="tabcontent2">Stuff</div>        
  </div>
</div>

ただし、私が見つけることができるすべてのサンプルコードは、関連する div をリストの直後に配置するだけのように見えるため、div の順序はリストの順序に対応しています。この種のことを達成する方法はありますか？

編集:明確にするために、ヘッダーの外側にtabcontent div を表示する方法を探しています。実際の divがhtmlのどこにあるかはあまり気にしませんが、ページ上で生成されたときに表示される場所です。

4

2 に答える 2

1

わかりました、私はそれを理解しました。コンテンツ div をタブに直接アタッチする方法はないと思いますが、タブストリップの「表示」または「選択」イベントで同じ機能を実現できます。これが私が最終的に書いたもので、煮詰めたものです。

HTML:

<div class="border">
  <div class="header">
    <div id="tabstriplist">
      <ul>
        <li id="tab1">First tab</li>
        <li id="tab2">Second tab</li>
      </ul>
      <div></div>
      <div></div>
    </div>
    <div>Some other text</div>
  </div>
  <div class="content">
    <div id="tabcontent1">Stuff1</div>
    <div id="tabcontent2">Stuff2</div>        
  </div>
</div>

J:

$(document).ready(function () {
    function onTabSelect(selection) {
        var contents = $("#content").children();
        var tabNum = selection.contentElement.id.charAt(selection.contentElement.id.length - 1);
        for (i = 0; i < contents.length; i++) {
            if (tabNum - 1 === i) {
                $("#" + contents[i].id).show();
            }
            else {
                $("#" + contents[i].id).hide();
            }
        }
    }

    $("#tabstrip").kendoTabStrip({
        show: onTabSelect
    }).data("kendoTabStrip").select(0);

    $("#tabstrip-1").remove();
    $("#tabstrip-2").remove();
于 2015-10-16T23:17:21.137 に答える