CODEWITHSUNDEEP
javascriptjqueryjquery-uijquery-ui-tabs
Pete
Pete

Reputation: 58422

Tabs event clicking on active tab

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

Upvotes: 2

Views: 18324

Answers (2)

Rajshekar Reddy
Rajshekar Reddy

Reputation: 18987

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>

Upvotes: 1

DontVoteMeDown
DontVoteMeDown

Reputation: 21465

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>

Upvotes: 7

Related Questions