Tabs event clicking on active tab

Question

I'm using jquery ui tabs and was wondering if there is an event for when you click on an active tab (or any tab).

I have tried the activate and beforeActive but these only seem to fire when a non active tab is clicked on (see following code)

$("#tabs").tabs({
  beforeActivate: function(event, ui) {
    console.log('beforeActivate')
  },
  activate: function(event, ui) {
    console.log('activate')
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<div id="tabs" class="ui-layout-center">
  <ul>
    <li>
      <a href="#tab-1">Tab #1</a>
    </li>
    <li>
      <a href="#tab-2">Tab #1</a>
    </li>
  </ul>
  <div id="tab-container">
    <div id="tab-1">
      tab 1!
    </div>
    <div id="tab-2">
      tab 2!
    </div>
  </div>
</div>

What I'm attempting to do is toggle a class on the ul when the active li is clicked. Can this be done using the tabs extra events as I am trying not to to add a separate click event outside the ui methods

Solution 1

Try this:

$("#tabs")
    .tabs()
    .on("click", '[role="tab"]', function() {
        $(this).closest("ul") // The current UL
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<div id="tabs" class="ui-layout-center">
  <ul>
    <li>
      <a href="#tab-1">Tab #1</a>
    </li>
    <li>
      <a href="#tab-2">Tab #1</a>
    </li>
  </ul>
  <div id="tab-container">
    <div id="tab-1">
      tab 1!
    </div>
    <div id="tab-2">
      tab 2!
    </div>
  </div>
</div>

Solution 2

Can this be done using the tabs extra events as I am trying not to to add a separate click event outside the ui methods

No, as far as I know. I checked the documentation and there is no event that fires when you click on a already activated tab.

However if you are looking for other solutions then I can suggest you to use below code to apply the click event.

NOTE: make sure to add this line of code before applying the tab plugin. Because we want to run our script first and then the jquery plugin script, else the plugin will make the clicked tab as active and then when our script runs it evaluates to active tab which is wrong.

$('#tabs li a').on('click',function(){
  if($(this).closest('li').hasClass('ui-state-active')){
      alert('this tab is already active');
  }
});

---

Here is a working DEMO

$('#tabs li a').on('click',function(){
  if($(this).closest('li').hasClass('ui-state-active')){
      alert('this tab is already active');
  }
});

$("#tabs").tabs({
   beforeActivate: function(event, ui) {
      
   }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<div id="tabs" class="ui-layout-center">
  <ul>
    <li>
      <a href="#tab-1">Tab #1</a>
    </li>
    <li>
      <a href="#tab-2">Tab #1</a>
    </li>
  </ul>
  <div id="tab-container">
    <div id="tab-1">
      tab 1!
    </div>
    <div id="tab-2">
      tab 2!
    </div>
  </div>
</div>

Comments

[Pete]

sorry, was just editing my question to say I've tried that too - only fires when a non active tab is clicked

[Pete]

hmm nice, you might be onto something here. Not sure who downvoted you but +1 from me

[Pete]

I tried this earlier but it seems to fire whenever any tab is clicked, whether it has that class or not

[Rajshekar Reddy]

@Pete no it will not.. because I have added this class li.ui-state-active it works only on the active tab. Let me ad a working demo for you

[Pete]

here is my demo: jsfiddle.net/MhEEH/399. No matter which tab you click (active or not) it fires the console.log

[Rajshekar Reddy]

@Pete you are right.. I will resolve it.. give me a minute

[Pete]

nice, didn't even think about using hasClass as I would have thought it would have had it seeing as though the previous selector seemed to fire all the time

[Marcos Pérez Gude]

Sorry, was me. Before the edition, I was doing a test with the code and it doesn't works for me... but if OP said that's fine, it's ok :D