Javascript 为什么在幻灯片内容之间显示白色屏幕？

我有三个标签有三个内容。我使用的是幻灯片转换。我使用的是JQM 1.4.2。我的问题是，当我将一个标签移动到另一个标签时，它会显示白色屏幕。我将如何使用幻灯片转换删除该屏幕。这是fiddle 如何移除白色屏幕

<div data-role="page" id="page1">
  <div data-role="header">
    <h1>jQuery Mobile Example</h1>
  </div>
  <div role="main" class="ui-content">
    <div >
      <div data-role="navbar">
        <ul>
          <li><a href="#fragment-1" class="tabBtn" data-transition="slide">One</a></li>
          <li><a href="#fragment-2" class="tabBtn" data-transition="slide">Two</a></li>
          <li><a href="#fragment-3" class="tabBtn" data-transition="slide">Three</a></li>
        </ul>
      </div>
      <div id="fragment-1" class="tabContent" data-tabid="0">
        <p>This is the content of the tab 'One', with the id fragment-1.</p>
      </div>
      <div id="fragment-2" class="tabContent" data-tabid="1">
        <p>This is the content of the tab 'Two', with the id fragment-2.</p>
      </div>
      <div id="fragment-3" class="tabContent" data-tabid="2">
        <p>This is the content of the tab 'Three', with the id fragment-3.</p>
      </div>
    </div>
  </div>
</div>

---

有更新吗。。？如何显示内容。

您可以使用旋转木马/滑块插件。对于这个例子，我使用

在页面中包含owl crousel js和css后，标记将是：

  <div data-role="navbar">
    <ul>
      <li><a href="#" class="tabBtn" data-tabid="0">One</a></li>
      <li><a href="#" class="tabBtn" data-tabid="1">Two</a></li>
      <li><a href="#" class="tabBtn" data-tabid="2">Three</a></li>
    </ul>
  </div>
    <div id="owl-demo" class="owl-carousel owl-theme">
      <div id="fragment-1" class="item">
        <p>This is the content of the tab 'One', with the id fragment-1.</p>
      </div>
      <div id="fragment-2" class="item">
        <p>This is the content of the tab 'Two', with the id fragment-2.</p>
      </div>
      <div id="fragment-3" class="item">
        <p>This is the content of the tab 'Three', with the id fragment-3.</p>
      </div>            
    </div>
</div>

#owl-demo {
    position: relative;
}
#owl-demo .item {
    border: 1px solid #999;
    background: #aaa;
    padding: 30px 0;
    text-align: center;
    height: 200px;
    text-shadow: none;
}

最后，处理选项卡按钮单击事件以直接导航到幻灯片：

$(".tabBtn").on("click", function(){
    var tabid = $(this).data("tabid");
    var owl = $("#owl-demo").data('owlCarousel');
    owl.goTo(tabid);
});

这是一张工作票

---

感谢伟大的解决方案，但第一次有一个问题选项卡没有活动类，当用户左右滑动时，它不显示活动类。当用户左右滑动时，您可以建议添加活动类吗谢谢回答。。！！但若你们看到它并没有正常滑动，那个么当你们左右滑动时，它会停在中间。我用的是chrome。它是chrome行为

$(".tabBtn").on("click", function(){
    var tabid = $(this).data("tabid");
    var owl = $("#owl-demo").data('owlCarousel');
    owl.goTo(tabid);
});