jquery 功能仅在选项卡打开时准备就绪

Question

我根据 twitter 引导标签使用了一些标签：

<ul class="nav nav-tabs">
  <li><a href="#home" data-toggle="tab">Home</a></li>
  <li><a href="#profile" data-toggle="tab">Profile</a></li>
  <li><a href="#messages" data-toggle="tab">Messages</a></li>
  <li><a href="#settings" data-toggle="tab">Settings</a></li>
</ul>

在我的最后一个标签中，有一些函数调用 ajax 并给我的网站带来负担。也许用户永远不会打开最后一个标签。我更喜欢我的 jquery 的就绪功能仅在该选项卡打开时等待。 我知道有一些方法，但是只有在选择最后一个选项卡时才有任何干净的方法来模拟准备就绪。也许这段代码表达了我想要的：

$ run only once on when document ready and last tab opened
{
  $(function() {
     call relatex ajax loadings
  });
}

Answer 1

我不认为您在这里选择的是文档就绪处理程序......您可以为此目的使用引导选项卡提供的 shown 事件

jQuery(function ($) {
    $('.nav-tabs a').one('show', function(e){
        //use e.target to know which tab was shown, then make the ajax requests
        var $target = $(e.target);
        if($target.attr('href') == '#profile'){
            alert('profile')
        } else if($target.attr('href') == '#messages'){
            alert('messages')
        } else if($target.attr('href') == '#settings'){
            alert('settings')
        }
    });
});

演示：Fiddle

如果您只想针对特定选项卡，则仅为那些 a 元素注册处理程序，例如

$('.nav-tabs a[href="#profile"]').one('show', function(e){
    //this will fire for only profile tab
});