Question

我在Bootstrap 2.1中成功使用了以下内容，但是当我尝试在Bootstrap 3中使用它时，动态内容未被加载。

有人可以建议修复吗？

由于

    <script type="text/javascript">
   $(function() {
      $("#MainTabs").tab();
      $("#MainTabs").bind("show", function(e) {    
        var contentID  = $(e.target).attr("data-target");
        var contentURL = $(e.target).attr("href");
        if (typeof(contentURL) != 'undefined')
      $(contentID).load(contentURL, function(){ $("#MainTabs").tab(); });
    else
      $(contentID).tab('show');
      });
      $('#MainTabs a:first').tab("show");
    });
    </script>

和

   <ul id="MainTabs" class="nav nav-tabs">
        <li><a data-target="#tab1" data-toggle="tab" href="a">tab 1</a></li>
        <li><a data-target="#tab2" data-toggle="tab" href="content-test.php">tab 2</a></li>
        <li><a data-target="#tab3" data-toggle="tab" href="tab-calendar.php?SiteID=201">tab 3</a></li>
    </ul>

Answer 1

尝试使用....

$("#MainTabs").bind("show.bs.tab", function(e) {

而不是......

$("#MainTabs").bind("show", function(e) {

虽然从jQuery 1.7开始，.on()是附加事件处理程序的首选方法。

$("#MainTabs").on("show.bs.tab", function(e) {

在Bootstrap 2中工作的动态选项卡在Bootstrap 3中不起作用

1 个答案: