0

我在工作中使用 twitter bootstrap。"tab" 方法（即；$("a element under tab li").tab("show")）完美地切换到由 jQuery 选择器指定的新选项卡，直到完成 ajax 加载。当我使用创建新选项卡jQuery append时，加载其窗格内容jQuery load并尝试使用 tab("show") 切换到该新选项卡，它给出错误元素没有方法tab

更新

    <div class="tabbable">
      <ul class="nav nav-tabs" id="tab-set">
        <li class="active"><a data-toggle="tab" href="#tab1"> tab 1</a></li>
        <li><a data-toggle="tab" href="#tab2">tab 2</a></li>
        <li><a data-toggle="tab" href="#tab3">tab 3</a></li>
        <li><a data-toggle="tab" class="ajax" href="test.html">tab 4 - ajax</a></li>
      </ul>
      <div class="tab-content" id="tab-content">
        <div id="tab1" class="tab-pane active"> tab 1 content </div>
        <div id="tab2" class="tab-pane"> tab 2 content </div>
        <div id="tab3" class="tab-pane"> tab 3 content </div>
      </div>
    </div>

这是通过 ajax 添加新标签的 javascript 代码

$("#tab-set").append("<li id='"+tabType+"'><a href='#" + tabType +
       "-pane' data-toggle=\"tab\"> " + tabName + "</a></li>");

$("#tab-content").append("<div class=\"tab-pane\" id=\"" +tabType + "-pane\"></div>");
$("#" + tabType + "-pane").load(tabUrl);

添加新标签后，我尝试使用切换到该标签

$("#" + tabType + " a").last().tab("show");

但这不起作用。

4

2 回答 2

2

在这条线上：

$("#tab-content").append("<div class=\"tab-pane\" id=\"" +tabType + "-pane\"></div>");

你有#tab-content，但你的div实际上有一个tab-content类，而不是一个id。所以它需要是：

$(".tab-content").append("<div class=\"tab-pane\" id=\"" +tabType + "-pane\"></div>");

我通过为 tabType、tabName 和 tabUrl 创建变量来测试您的代码，它适用于我上面提到的微小更改。但是我无法得到与您相同的错误（元素没有方法选项卡），所以如果这仍然对您不起作用，那么还有其他事情发生，您将需要发布更多代码。

于 2013-02-04T18:53:03.090 回答
1

是的，我现在遇到了麻烦。

我正在使用 na 加载页面$("#" + tabType + "-pane").load(tabUrl);，该页面也有 html、head、body 元素，并且它还在其中加载 jquery。这就产生了问题。它与此处给出的问题有关

现在我更改了加载页面的内容，它只加载所需的基本内部元素，没有 html、head、script、body 等标签。

这让我头疼了一整天。感谢上帝，我终于修好了。

编辑

甚至不需要删除所有元素。只需要注意不要从该加载页面再次加载 jquery（通过 $("#" + tabType + "-pane").load(tabUrl); 加载）。

于 2013-02-05T02:58:49.377 回答