javascript - Tabs event clicking on active tab - Stack Overflow

admin管理员组

文章数量:1291044

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=".1.1/jquery.min.js"></script>
<script type="text/javascript" src=".9.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href=".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>

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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery./ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery./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

• javascript
• jquery
• jquery-ui
• jquery-ui-tabs

Share Improve this question Follow edited Aug 31, 2016 at 12:09 Pete asked Aug 31, 2016 at 12:00 PetePete 58.5k2929 gold badges130130 silver badges184184 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

Try this:

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

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery./ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery./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>

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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery./ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery./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>

本文标签： javascriptTabs event clicking on active tabStack Overflow