Question

this sounds so easy – but I just can’t figure out the syntax.

I have a tab with multiple sortable lists.

But focusing on the tabs. When a tab is clicked I would like to perform various actions. This can be achieved as below.

$( '#tabs' ).tabs({ 
   selected: '<?php echo 'tabs-'.$iTabSelected ?>',
   select: function( event, ui ) {
    // actions performed
   } 
});

What’s holding me back is, how do I get the id of the li element which makes up my tab:

<div id="tabs">
    <div>
        <div class="tabs">
        <ul id="pui-tabs">

        <?php foreach( $aTabListData as $iKey => $aTabList ) { ?>

            <li id="tab-<?php echo $aTabList['tab'] ?>">

                    <a href="#tabs-<?php echo $aTabList['tab'] ?>"><?php echo $aTabList['name'] ?></a>
            </li>

I’m trying to get the following id when a tab is selected.

<li id="tab-<?php echo $aTabList['tab'] ?>">

Can I use ui.tab to get the li id?

Thanks in advance.

Answer 1

The select method actually takes two arguments:

$( '#tabs' ).tabs({ 
   selected: '<?php echo 'tabs-'.$iTabSelected ?>',
   select: function(event, ui) {
      // Objects available in the function context:
      ui.tab     // anchor element of the selected (clicked) tab
      ui.panel   // element, that contains the selected/clicked tab contents
      ui.index   // zero-based index of the selected (clicked) tab
   } 
});