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
});

最后处理标签按钮单击事件以直接导航到幻灯片：

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

这是一个有效的 DEMO

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

1 个答案: