0

如何获取 jQuery UI 选项卡选项卡元素面板编号并在其中一些上设置 CSS 样式可见性？

我想获取选项卡的元素面板编号并在某些选项卡上设置可见性。

<div id="tabs">
<ul>
<li><a href="#">1</a>
:
<li><a href="#">10</>
</ul>
<div id="tab-contents">
<div id="tab1">some content</div>
:
<div id="tab1">some content</div>
</div>

通过 or 获取元素面板编号eq()，然后为某些选项卡设置style visibility = hidden;or 。visible;我尝试了以下方法，但它不适用于 jQuery 1.10.2 和 jQuery UI 1.10.3。

$(function() {
var panelNumber = $("#tabs").eq();
document.getElementById("div#tabs ul li").visibility = 'hidden';
alert(panelNumber);
)};

我想将指定的选项卡设置为可见，其余选项卡为页面导航隐藏。此外，我不希望 DOM 在用于导航的选项卡上创建或销毁选项卡，因为最小化处理时间需要使用 CSS 可见性，因为它会变慢。

请回答问题，jQuery 1.10.2 and jQuery UI 1.10.3因为它们已弃用length，还有许多其他jQuery UI 1.9.*更新。

4

2 回答 2

1

您可以像这样使用.slice()：

工作示例 1

 $(function () {
     $("#tabs").tabs();
     $('#tabs li').slice(2, 5).css('visibility', 'hidden');
 });

或:nth-child()像这样：

工作示例 2

 $(function () {
     $("#tabs").tabs();
     $('#tabs li:nth-child(even)').css('visibility', 'hidden'); //note: even can be replaced with odd, specific number, or 3n+1 etc...
 });

这些只是几个简单的例子，显然有很多方法可以遍历和选择。

于 2013-09-12T13:29:28.420 回答
0

这是一个解决方案：

html:

<ul class="tablist">
  <li class="tab">a</li>
  <li class="tab">b</li>
  <li class="tab">c</li>
  <li class="tab">d</li>
  <li class="tab">e</li>
</ul>

javascript:

var tabs = $(document).find('.tablist .tab');
var tabsToToggle = { 0, 3, 4 }
for (var i=0;i<tabsToSet.length;i++)
{ 
   tabs.eq(i).toggle();
}

在 jsFiddle 上使用 jQuery 1.10.1、2.0.2 和 1.x 边缘测试

于 2013-09-12T12:49:22.020 回答