【问题标题】:Index of Selected Tab with some Hidden Tabs (jQuery)带有一些隐藏选项卡的选定选项卡的索引(jQuery)
【发布时间】:2018-03-13 11:18:34
【问题描述】:

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

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

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

我为此使用 ui.newTab.index(),它忽略了隐藏的标签。

谢谢,编码好!!

编辑。这是我的代码:

jQuery("#testTabs").tabs({ heightStyle: "fill", activate: function (event, ui) {
                var index = ui.newTab.index();
                }
});

在活动中。

【问题讨论】:

  • 你能给我们看看代码吗?
  • 编码好?为什么你听起来像我的老板?不过发布代码。
  • 编辑中的代码:)

标签: javascript jquery html tabs


【解决方案1】:

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

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

我将某人的 Fiddle 重构为具有隐藏元素,它仍然有效(打开控制台并查看)。所以我不认为你的问题是隐藏的。也许显示:无?比选项卡甚至不在 DOM 中。

<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

【讨论】:

    猜你喜欢
    • 2013-01-22
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2010-09-22
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多