Twitter引导选项卡和javascript事件 [英] Twitter bootstrap tabs and javascript events

问题描述

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

I am using twitter bootstrap for a project - in particular its tab functions (http://twitter.github.com/bootstrap/javascript.html#tabs)

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

Now I have this tablist and when I press the tab it switches to the content of each individual tab. However, this content is preloaded in the page (the html code for the content of all tabs is already there, you only change the visibility by pressing the tabs).

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

However I want to only dynamically load content when a certain tab is pressed, so one will get the latest data instead of the data when the whole page was loaded.

我打算为此使用jQuery.但是，如何确保在按下选项卡时调用某个jquery函数?

I am planning on using jQuery for this. However, how can I make it that when a tab is pressed a certain jquery function is called?

我试图在单击选项卡时显示警报(如果可行，则jQuery函数也可以)，但即使这样也不起作用:

I tried to show an alert when a tab was clicked (if that works, a jQuery function will too), but even that isn't working:

<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

see this for the workings of twitter bootstrap tabs: (http://twitter.github.com/bootstrap/javascript.html#tabs) and the js file it uses: http://twitter.github.com/bootstrap/1.4.0/bootstrap-tabs.js

推荐答案

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

The bind seems to run before the DOM is ready. In addition, your selector seems to be broken and you can bind change only on select elements. You have to work around by clicking and implementing some logic. Try

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

更新

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

After consulting with the documentation, it seems that your code was only missing the DOM ready part, the rest wasn't actually a bug, which means that according to the docs the following should work:

$(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有效，并且还将更改事件添加到tab元素.弄清楚为什么他们认为此语法是个好主意.

What caused confusion is that the plugin overrides default selector, making #.tabs valid and also adding a change event to the tab element. Go figure why they decided this syntax was a great idea.

无论如何，您都可以尝试第二个示例并在选项卡更改之前或之后触发警报来进行注释.

Anyways you can try the second sample and comment wether the alert is fired before or after the tab change.

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

fixed jquery exception caused by #.tabs selector

这篇关于Twitter引导选项卡和javascript事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！