Twitter 引导选项卡和 javascript 事件

Posted 2023-05-08

【中文标题】Twitter 引导选项卡和 javascript 事件

【英文标题】：Twitter bootstrap tabs and javascript events

【发布时间】：2011-12-29 12:43:38

【问题描述】：

我正在为一个项目使用 twitter 引导程序 - 特别是它的选项卡功能 (http://twitter.github.com/bootstrap/javascript.html#tabs)

现在我有了这个选项卡列表，当我按下选项卡时，它会切换到每个单独选项卡的内容。但是，此内容是在页面中预加载的（所有选项卡的内容的 html 代码已经存在，您只需通过按选项卡更改可见性）。

但是，我只想在按下某个选项卡时动态加载内容，因此在加载整个页面时将获取最新数据而不是数据。

我打算为此使用 jQuery。但是，如何才能在按下选项卡时调用某个 jquery 函数？

我尝试在单击选项卡时显示警报（如果可以，jQuery 函数也可以），但即使这样也不起作用：

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="http://twitter.github.com/bootstrap/1.4.0/bootstrap-tabs.js"></script>
<script type="text/javascript">
$(function() 
    $('.tabs').bind('click', function (e) 
        e.target(window.alert("hello"))
    );
);
</script>

还有我的html：

<ul class="tabs" data-tabs="tabs">
  <li class="active"><a href="#tab1">tab 1</a></li>
  <li><a href="#tab2">tab 2</li>
</ul>

<div id="my-tab-content" class="tab-content">
  <div class="tab-pane" id="tab1">
      <h1>Tab1</h1>
      <p>orange orange orange orange orange</p>
  </div>
  <div class="tab-pane" id="tab2">
     <h1>Tab2</h1>
     <p>blue blue blue blue blue</p>
  </div>
</div>

知道如何进行这项工作吗？

有关 twitter 引导选项卡的工作原理，请参阅此内容：(http://twitter.github.com/bootstrap/javascript.html#tabs) 以及它使用的 js 文件： http://twitter.github.com/bootstrap/1.4.0/bootstrap-tabs.js

【参考方案1】：

对于 Twitter Bootstrap 版本 2，documented way to subscribe to tab change events 是

$('a[data-toggle="tab"]').on('shown', function (e) 
  e.target // activated tab
  e.relatedTarget // previous tab
)

有关 Twitter Bootstrap 选项卡事件的最新文档可在 http://getbootstrap.com/javascript/#tabs 找到

【讨论】：

如果您想将内容加载到属于该选项卡的 中，您可以使用$($(e.target).attr('href'))（在事件处理程序中）找到该 。 有时，最好滚动到页面底部。谢谢！ 使用 Bootstrap 3，您需要使用 'shown.bs.tab' 而不是 'shown'

【参考方案2】：

如果您使用的是 2.3.2 并且无法正常工作，请尝试使用：

$(document).on("shown", 'a[data-toggle="tab"]', function (e) 
     console.log('showing tab ' + e.target); // Active Tab
     console.log('showing tab ' + e.relatedTarget); // Previous Tab
);

2.3.2 标签使用：http://getbootstrap.com/2.3.2/javascript.html#tabs

如果您使用的是版本 3（当前为 RC2），那么文档会显示

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) 
     console.log('showing tab ' + e.target); // Active Tab
     console.log('showing tab ' + e.relatedTarget); // Previous Tab
 )

RC2 选项卡用法：http://getbootstrap.com/javascript/#tabs-usage

【参考方案3】：

绑定似乎在 DOM 准备好之前运行。此外，您的选择器似乎已损坏，您只能在选择元素上绑定更改。您必须通过单击并实现一些逻辑来解决问题。试试

$(function() 
    $('.tabs').bind('click', function (e) 
        e.target(window.alert("hello"))
    );
);

更新

在查阅文档后，您的代码似乎只是缺少 DOM 就绪部分，其余部分实际上并不是错误，这意味着根据文档，以下内容应该可以工作：

$(function() 
    $('.tabs').bind('change', function (e) 
        // e.target is the new active tab according to docs
        // so save the reference in case it's needed later on
        window.activeTab = e.target;
        // display the alert
        alert("hello");
        // Load data etc
    );
);

造成混乱的原因是插件覆盖了默认选择器，使#.tabs 有效，并且还向选项卡元素添加了更改事件。弄清楚为什么他们认为这种语法是个好主意。

无论如何，您都可以尝试第二个示例并评论警报是否在选项卡更改之前或之后触发。

编辑：修复了由 #.tabs 选择器引起的 jquery 异常

【讨论】：

这个有效！但是，它现在会在显示新选项卡之前显示警报。我怎样才能让它首先显示新标签，然后显示警报？

@Javaaaa 很难说，请更新您问题中的代码以反映当前的“工作”状态，当警报之前触发时。

完成！我问是因为当我单击选项卡时，jqquery 函数应该获取一些数据，并且当它检索到用该数据填充选项卡的 div 时。就像现在一样，它首先显示警报，并且只有当我单击确定时才会更改选项卡。是否与检索数据相同，因为它会等到检索到数据然后才更改选项卡？

@Javaaaa 我在答案中添加了一些额外的信息，尝试一下并回复它是如何工作的，根据文档，应该没问题。

这根本不起作用。 $('#.tabs') 在 JQuery 中导致异常，我尝试了所有组合 - 唯一有效的是绑定点击事件。

【参考方案4】：

您可以在 bootstrap 3 中使用以下 sn-p 代码

$(document).on( 'shown.bs.tab', 'a[data-toggle="tab"]', function (e) 
   var activatedTab = e.target; // activated tab
)

【讨论】：

效果很好，只是它不会在文档加载时已经加载的第一个选项卡上触发？

【参考方案5】：

如何使用点击？像这样：

$('#.tabs').click(function (e) 
  e.target(window.alert("hello"))
)

【参考方案6】：

与选择器相关的语法有错误：

$('#.tabs') // should be ...
$('.tabs');

无序列表在您的 HTML 中有一个名为“tabs”的类，而您最初试图选择具有 id '.tabs' 的元素。

而且你也必须考虑 manticore 的建议。您只能在表单元素上使用“更改”。

$(document).ready(function() 
    $('.tabs').click(function(e) 
        e.preventDefault();
        alert('tab clicked!');
    );
);

【参考方案7】：

Documentation 说：使用事件show。