javascript - JQuery获取所选选项卡的ID不起作用

Question

我已经尝试了很多示例，但我无法让我的代码工作以获取所选选项卡的 ID

http://pastebin.com/A5cqQS61

js代码：

$(function() {
  $('#tabs').tabs({
    select: function(event, ui) {
        console.log($(ui.tab)); // the tab selected
        console.log(ui.index);
    },
    show: function(event, ui) {
        console.log($(ui.tab)); // the tab shown
        console.log(ui.index);
    }
    });
});

HTML：

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Nunc tincidunt</a></li>
        <li><a href="#tabs-2">Proin dolor</a></li>
        <li><a href="#tabs-3">Aenean lacinia</a></li>
    </ul>
    <div id="tabs-1">
        <p>text1</p>
    </div>
    <div id="tabs-2">
        <p>text2</p>
    </div>
    <div id="tabs-3">
        <p>text3</p>
    </div>
</div>

我放入了 pastebin，因为我不明白代码块在堆栈中的工作原理！我已经按了四次空格，似乎从来没有很好地工作。

到目前为止，我已经查看了这些解决方案： jquery tab selected jQuery tabs - Get the index of previous selected tab jQuery tabs - Get the index of previous selected tab Get tab selected Id in jQuery UI 1.9

Answer 1

您应该使用ui.panel, 返回 div 选项卡元素：{如果它是您正在寻找的？}

看演示

$(function () {
    $('#tabs').tabs({
        select: function (event, ui) {
            console.log(ui.panel.id);
            console.log(ui.index);
        },
        show: function (event, ui) {
             console.log($(ui.panel));//jq object
            console.log(ui.panel.id);
            console.log(ui.index);
        }
    });
});

Answer 2

我通常以盗版方式... $('#tabs li.active')。这将为您提供 id='tabs' 元素下的活动 li。如果你能得到元素，那么... jQuery 允许你做这样的事情... $(element).

从那里你可以做 var ID=$(element.attr('id');

Answer 3

请试试这个——注意不同的事件名称（'activate'）和ui对象不同属性的用法：

$(function() {
  $('#tabs').tabs({
    activate: function(event, ui) {
        console.log(ui.newPanel[0].id);
    }});
});