Question

我的jquery移动应用程序中的Bootstrap选项卡出现问题。我有2页，有2个单独的标签。

当我加载页面时，您会在正文中看到3个标签，显示Home, Menu 1, Menu 2这些标签标签工作正常（Demo Link）。在该页面上，您将看到“查看地图”链接，该链接将带您到另一个页面但是如果您注意到该页面中的选项卡不起作用（不是标签1，标签2，标签3）。但是，当我刷新它再次工作。当我点击主页链接时，标签在那里不起作用。

我已经在标题中的所有页面上加载了引导程序文件。我甚至尝试将它们移到data-role="page"但它仍然无效。

如果我禁用ajax它可以工作，但我不想禁用它。我需要保持页面之间的平滑过渡

以下是标签

的HTML代码

<ul class="nav nav-tabs">
  <li class="active"><a data-toggle="tab" href="#home">Home</a></li>
  <li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
  <li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
</ul>

<div class="tab-content">
  <div id="home" class="tab-pane fade in active">
    <h3>HOME</h3>
    <p>Some content.</p>
  </div>
  <div id="menu1" class="tab-pane fade">
    <h3>Menu 1</h3>
    <p>Some content in menu 1.</p>
  </div>
  <div id="menu2" class="tab-pane fade">
    <h3>Menu 2</h3>
    <p>Some content in menu 2.</p>
  </div>
</div>

Demo Link

有人可以告诉我可能导致它的原因以及如何解决它？

任何帮助将不胜感激

Answer 1

管理修复它..问题是我在选项卡上有相同的ID。虽然它在2个不同的页面上，但当我导航到JQM上的不同页面时，它仍然链接旧的页面选项卡。

一旦我将ID更改为在两个页面上看起来都不同，它就开始工作了

引导选项卡无法在jquery mobile中运行

1 个答案: