带有一些隐藏选项卡的选定选项卡索引(jQuery)

时间:2017-10-02 11:29:02

标签: javascript jquery html tabs

我有一个标签控件,我正在尝试获取所选标签的索引,但我遇到了问题。我在选择之前有一些隐藏的标签,我得到的索引是这样的:

Tab1 - Tab2(隐藏) - Tab3(隐藏) - Tab4

当我尝试获取Tab4的索引时,我得到1,但我想获得3(索引从0到3)。

我正在使用ui.newTab.index(),它会忽略隐藏的标签。

谢谢你,编码好!!

修改即可。这是我的代码:



{{1}}




事件发生了。

1 个答案:

答案 0 :(得分:0)

您使用的是jQuery 1.10+因为1.8及更早版本(我认为)使用select not activate?

顺便说一句,你的代码没有链接的查询,在链接的jQ中做一个小提琴并在你的时候添加HTML?

我重构某人的小提琴有一个隐藏的元素,它仍然有效(打开控制台,看看)。所以我不认为你的问题是隐藏的。也许显示:无?在DOM中,Than tab甚至都没有。

<div id="tabs">
  <ul>
    <li><a href="#fragment-1"><span>One</span></a></li>
    <li style="visibility: hidden;"><a href="#fragment-2"><span>Two</span></a></li>
    <li><a href="#fragment-3"><span>Three</span></a></li>
  </ul>
  <div id="fragment-1">
    <p>First tab is active by default:</p>
    <pre><code>$( "#tabs" ).tabs(); </code></pre>
  </div>
  <div id="fragment-2">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  </div>
  <div id="fragment-3">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  </div>
</div>

JS

$( "#tabs" ).tabs({
  activate: function( event, ui ) {

      console.log(ui.newTab.index());
}
});

this fiddle