单击活动选项卡的选项卡事件

Posted 2023-05-08

【中文标题】单击活动选项卡的选项卡事件

【英文标题】：Tabs event clicking on active tab

【发布时间】：2017-01-08 00:18:31

【问题描述】：

我正在使用 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 方法之外添加单独的点击事件

【参考方案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>

【讨论】：

抱歉，我只是在编辑我的问题，说我也尝试过 - 仅在单击非活动标签时触发

嗯，很好，你可能在这里有所收获。不知道谁对你投了反对票，但我 +1

对不起，是我。在此版本之前，我正在对代码进行测试，但它对我不起作用......但如果 OP 说没关系，没关系：D

【参考方案2】：

这是否可以使用选项卡额外事件来完成，因为我试图不这样做 在 ui 方法之外添加单独的点击事件

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

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

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

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

【讨论】：

我之前尝试过，但无论何时单击任何选项卡，它似乎都会触发，无论它是否具有该类

@Pete 不，它不会......因为我已经添加了这个类li.ui-state-active 它只适用于活动选项卡。让我为你做一个工作演示

这是我的演示：jsfiddle.net/MhEEH/399。无论您单击哪个选项卡（活动与否），它都会触发 console.log

@Pete 你是对的.. 我会解决的.. 给我一分钟

很好，我什至没有考虑过使用 hasClass，因为我认为它会让它看起来好像之前的选择器似乎一直在触发