Question

所以，我在js中使用kendo。我想使用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的顺序对应于列表顺序。有没有办法完成这类事情？

修改以澄清，我正在寻找一种方法来显示标题中的tabcontent div 。我并不真正关心html中实际div 的位置，而是在页面上生成它们时会出现的位置。

Answer 1

好的，我明白了。我认为没有办法直接将内容div附加到选项卡，但您可以通过tabstrip的“show”或“select”事件实现相同的功能。这就是我最终写完的内容，归结起来。

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>

JS：

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

Answer 2

首先解决方案是留下像我这样的空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>

然后随时设置标签内容

$(document).ready(function() {
  var tabstrip = $("#tabstriplist").kendoTabStrip().data("kendoTabStrip");

var item = tabstrip.contentElement(0);
//replace the first tab content
$(item).html($("#tabcontent1").html());
});

或者使用以下方式创建整个标签条：

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

和JS一样初始化：

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

  tabstrip.append({
      text: "Firts tab",
      content: $("#tabcontent1").html()
    });
  tabstrip.append({
      text: "Second tab",
      content: $("#tabcontent2").html()
    });

如何在HTML中分离Kendo Tabstrip选项卡列表和内容div？

2 个答案: