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

Question

我有三个标签，三个标签。我正在使用幻灯片过渡。我正在使用 JQM 1.4.2。我的问题是，当我将一个标签移动到另一个标签时，它会显示白屏。我将如何使用幻灯片过渡删除该屏幕.这是小提琴 http://jsfiddle.net/ezanker/fRb9L/2/ 怎么去掉那个白屏

<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>

有更新吗..？如何显示竞争。

Answer 1

您可以使用轮播/滑块插件。对于这个例子，我使用的是

OWL Carousel Plugin.

在您的页面中包含 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;
}

那么设置轮播的脚本是

$("#owl-demo").owlCarousel({
  navigation : false, // hide next and prev buttons
  pagination : false, //hide pagination dots
  slideSpeed : 300,
  paginationSpeed : 400,
  singleItem:true
});

最后处理tab按钮点击事件直接导航到一张幻灯片：

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

这是一个有效的DEMO