Question

我正在使用jquery ui标签，并想知道当您点击活动标签（或任何标签页）时是否有事件。

我已经尝试了activate和beforeActive但这些似乎只在点击非活动标签时触发（参见下面的代码）

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

我尝试做的是在点击活动li时切换ul上的类。这可以使用标签额外的事件来完成，因为我试图不在ui方法之外添加单独的点击事件

Answer 1

试试这个：

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

Answer 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>

Tabs事件单击活动选项卡

2 个答案: