Tabs 事件点击活动标签

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 上切换 class。这可以使用选项卡额外事件来完成吗，因为我试图不在 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

没有，据我所知。我检查了文档，当您单击已激活的选项卡时没有触发任何事件。

但是，如果您正在寻找其他解决方案，那么我建议您使用以下代码来应用点击事件。

注意：确保在应用选项卡插件之前添加这行代码。因为我们想先运行我们的脚本，然后 jquery 插件脚本，否则插件将使点击的选项卡处于活动状态，然后当我们的脚本运行s 评估为活动选项卡时是错的。

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

这是一个有效的 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 事件点击活动标签

Tabs event clicking on active tab

javascript

jquery

jquery-ui

jquery-ui-tabs