Question

我使用以下代码开发标签。

$(document).ready(function() {
    $('#container-1').tabs();
}
 ....
<div id="container-1">
    <ul>
        <li><a href="#fragment-1"><span>Home</span></a></li>
        <li><a href="#fragment-2"><span>Contact</span></a></li>
    </ul>
</div>

...

工作正常！我需要标签点击事件。如果是 Home 标签，请点击，我必须alert();。我如何实现这一目标？

Answer 1

设置主页标签范围元素的ID：

<li><a href="#fragment-1"><span id="home">Home</span></a></li>

在某处添加点击处理程序：

$("#home").click(function()
{
    alert("Home tab is selected!");
});

Answer 2

就个人而言，我会在标签配置本身处理所有内容，而不是将点击事件添加到最终将成为标签的可点击部分的元素。如果您通过选项卡配置执行此操作，那么所有选项卡逻辑都是集中的，从而使事情变得更加清晰，您无需熟悉选项卡的实现细节：

  $(document).ready(function() {
      $('#container-1').tabs({
          selected : function(e, ui) {
            if (ui.index == 0) {
                alert('Home clicked!');
            }
          }        
      }); 
  });
   ....
  <div  id="container-1">
        <ul>
            <li><a href="#fragment-1"><span>Home</span></a></li>
            <li><a href="#fragment-2"><span>Contact</span></a></li>

         </ul>
  </div>

Answer 3

如果您想要标签点击事件，您可以执行以下操作之一。

$("#tabid").click(function(e) {
    e.preventDefault();
    // Do tab click logic
});

或

$(".tabclass").click(function(e) {
    e.preventDefault();
    // Do tab click logic
});

搜索jQuery cheat sheet以获得一个非常有用的jQuery备忘单。

如何找出TabSelection

3 个答案: