Question

我已经创建了一个标签组，用户可以在jQuery UI的example之后添加和关闭标签页。

它工作正常，但我需要这样做，如果只有一个标签，你就无法关闭它。基本上与Safari中的选项卡功能相同 - 第一个选项卡只有一个关闭按钮才有多个选项卡。

我认为这有点像这样：

if (tabNumber < 2) {
  $("#nav-tabs").tabs(".ui-icon-close").hide();
}

但不完全。我该怎么做？

非常感谢任何帮助。

Answer 1

我的第一直觉是找到一个内置的解决方案。但由于我们手动添加关闭按钮，我们应该在它显示时进行处理。所以我的解决方案也与你提到的一致。我刚刚修改了here给出的示例。我做了像这样的自定义刷新功能

function refresh(t){
  tabCount = $("#tabs li")
  console.log(tabCount.length)
  if(tabCount.length == 1){
    $('.ui-icon-close').hide()
  }
  else{
    $('.ui-icon-close').show()
  }
  t.tabs( "refresh" )
}

并替换所有对此

的刷新调用

refresh(tabs)

我做了一个有效的例子here 我希望它能让你开始

Answer 2

您可以使用CSS :only-child psuedoselector：

来解决此问题

.ui-tabs-nav li:only-child span.ui-icon-close{
  display:none !important;
}

如果只有一个标签，这将隐藏关闭按钮。没有JS！：）

JSFiddle Demo

jQuery UI选项卡：如果只有一个选项卡，则没有关闭按钮？

2 个答案: