JQuery get id of selected tab does not work

Question

I have tried a lot of examples done and I cannot get my code to work to get the ID of a selected tab

http://pastebin.com/A5cqQS61

js code:

$(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>

I put in pastebin, because I don't understand ow the code block works in stack! I've pressed space four times, never seems to work well.

I have looked at these solutions so far: jquery tab selected jQuery tabs - Get the index of previously selected tab jQuery tabs - Get the index of previously selected tab Get tab selected Id in jQuery UI 1.9

Answer 1

Please, try this one — note the different event name('activate') and usage of different property of ui object:

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

Answer 2

You should use ui.panel , returning div tab element: {if it's what you are looking for?}

SEE DEMO

$(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 3

I usually do the bootleg way... $('#tabs li.active'). This will give you the active li under the element with id='tabs'. If you can get the element, also... jQuery allows you do something like this... $(element).

From there you can do var ID=$(element.attr('id');