Kendo UI 选项卡 - 删除选项卡后选项卡不起作用

Question

我有一个剑道用户界面标签条。 在页面加载时，我删除了内容为空的选项卡。

它工作正常，我得到了我需要显示的标签，但是在标签之间移动不再起作用了。

例如我有这样的结构： 选项卡 1 - 有内容 选项卡 2 - 无内容 - 已删除 Tab 3 - 有内容

当我加载页面时，选项卡 1 被加载并选择， 但是当我点击标签 3 时，我得到了空的内容。 HTML结构没问题。 aria-controls 属性包含正确的值（tabstrip_wp_c09daa66ff014cc29c09eca6d0c9acfb-1 用于 Tab 1，tabstrip_wp_c09daa66ff014cc29c09eca6d0c9acfb-2 用于 Tab 3），即 div 的 id。

两个 div 都有正确的 id 和相关内容。

点击 Tab 3 后，对应的 div 没有任何变化（仍然具有相同的 css 类，并且 aria-hidden="true" aria-expanded="false"）。

有人知道为什么会这样吗？

谢谢

Answer 1

也许您正在使用 ajax 和 tabstrip 加载内容，试图将加载的内容添加到已删除的 tabstrip？如果是这样，您应该使用 contentLoad 事件代替 document.ready()。

我的替代建议是隐藏空标签而不是删除它：

var tabStrip = $("#tabstrip").kendoTabStrip().data("kendoTabStrip");
var items = $($("#tabstrip").data("kendoTabStrip").items());
if (contentHolder.text() == "") {
  $(items[i]).hide();
}

此外，您必须检查第一个非空选项卡的索引并选择它。