1

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

编辑：澄清一下，我正在寻找一种在标题之外显示 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>

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();
于 2015-10-16T23:17:21.137 回答
0

第一个解决方案是留下空的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()
    });
于 2015-10-16T14:58:02.833 回答