如何找出TabSelection

时间:2008-12-10 13:37:58

标签: javascript jquery

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

$(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();。我如何实现这一目标?

3 个答案:

答案 0 :(得分:2)

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

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

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

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

答案 1 :(得分:1)

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

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

答案 2 :(得分:0)

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

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

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

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

豫ICP备18024241号-1