Kendo ui 如何在html中分离剑道Tabstrip tab list和content Div？

所以，我在js中与剑道合作。我想使用tabstrip，但我希望选项卡包含在一个标题中，该标题具有样式并包含一些其他元素，因此我想知道是否有办法将选项卡列表及其关联的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的顺序与列表顺序相对应。有没有办法完成这类事情

---

编辑：为了澄清，我正在寻找一种在标题外显示选项卡内容div的方法。我并不真正关心实际的div在html中的位置，而是它们在页面上生成时会出现在哪里。

第一个解决方案是保留空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>
       <div></div>
    </div>
    <div>Some other text</div>
  </div>
  <div class="content">
    <div id="tabcontent1">Stuff</div>
    <div id="tabcontent2">Stuff</div>        
  </div>
</div>

或使用以下命令创建整个选项卡条：

<div id="tabstrip"></div> 
    <div class="content">
    <div id="tabcontent1">Stuff</div>
    <div id="tabcontent2">Stuff2</div>        
  </div>

---

好的，我知道了。我不认为有一种方法可以直接将内容div附加到选项卡，但是您可以通过tabstrip的“show”或“select”事件实现相同的功能。下面是我最后写的，归结起来

Html:

第一个选项卡
第二个选项卡

其他一些文本
材料1
材料2

Js:

$（文档）.ready（函数（）{
功能选择（选择）{
var contents=$（“#content”）.children（）；
var tabNum=selection.contentElement.id.charAt（selection.contentElement.id.length-1）；
对于（i=0；i

感谢您花时间回答，但您的两个建议都在生成tabstrip时将内容放在标题中，而我希望内容完全显示在单独的div中。为了更清晰，我将编辑我的问题。

<div id="tabstrip"></div> 
    <div class="content">
    <div id="tabcontent1">Stuff</div>
    <div id="tabcontent2">Stuff2</div>        
  </div>

var tabstrip = $("#tabstrip").kendoTabStrip().data("kendoTabStrip"); 

  tabstrip.append({
      text: "Firts tab",
      content: $("#tabcontent1").html()
    });
  tabstrip.append({
      text: "Second tab",
      content: $("#tabcontent2").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>

$(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();