首页 文章

Twitter引导选项卡和javascript事件

提问于
浏览 次
60

我正在为项目使用twitter bootstrap - 特别是它的tab功能（http://twitter.github.com/bootstrap/javascript.html#tabs）

现在我有了这个tablist，当我按下它时，它会切换到每个标签的内容 . 但是，此内容已预先加载到页面中（所有选项卡的内容的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>

Any idea on how to make this work?

看看这个twitter bootstrap选项卡的工作方式：（http://twitter.github.com/bootstrap/javascript.html#tabs）和它使用的js文件：http://twitter.github.com/bootstrap/1.4.0/bootstrap-tabs.js

javascript jquery twitter-bootstrap

7 回答

  • 0

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

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

    UPDATE

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

    $(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元素添加更改事件 . 去了解为什么他们认为这种语法是个好主意 .

    无论如何，你可以尝试第二个样本，并在标签更改之前或之后发出警告 .

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

    回复于
  • 72

    使用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找到

    回复于
  • 20

    如果您使用的是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

    回复于
  • 0

    您可以在bootstrap 3中使用以下代码段

    $(document).on( 'shown.bs.tab', 'a[data-toggle="tab"]', function (e) {
   var activatedTab = e.target; // activated tab
})
    回复于
  • 4

    使用点击怎么样？像这样：

    $('#.tabs').click(function (e) {
  e.target(window.alert("hello"))
})
    回复于
  • 14

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

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

    无序列表在您的HTML中具有 class ，称为'tabs'，而您最初尝试使用 id '.tabs'选择元素 .

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

    $(document).ready(function() {
    $('.tabs').click(function(e) {
        e.preventDefault();
        alert('tab clicked!');
    });
});
    回复于
  • 0

    Documentation说：使用事件 show .

    回复于

相关问题