Question

我有一个标签式菜单，我希望标签式菜单（ul class="tabs"）可以在移动视图中轻扫。

编辑：我发现使用 Slick JS 的代码片段，我从来不知道这个JS，但我希望它在我当前的标签上应用此codepen菜单。

如何正确组合我当前的标签式菜单？我试图将它组合起来，但我的选项卡式菜单的当前UI设计变得混乱。

这是我的codepen标签式菜单

<section class="wrapper">
<ul class="tabs">
   <li class="active"><span class="icons-tabbed icon-icon-tab-locator">Tab 1</span></li>
   <li><span  id="partner-store" class="icons-tabbed icon-icon-tab-howto">Tab 2</span></li>
   <li><span  id="partner-store" class="icons-tabbed icon-icon-tab-howto">Tab 3</span></li>
</ul>
<ul class="tab__content">
   <li class="active">
      <div id="tab1" class="content__wrapper">
      </div>
   </li>

Answer 1

如果要在菜单上水平滑动，要显示视口中不可见的任何其他导航项，您可以使用css执行此操作。

ctypes

Answer 2

使用jquery.mobile。这非常适合您的目的。我写了一个如何工作的样本。接下来要做的是将滑动事件与单击选项卡绑定。我建议您使用next()进行右侧滑动，使用prev()进行左侧滑动以定位标签。

请参阅此示例：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script>
$(document).on("pagecreate","#pageone",function(){
  $("p").on("swipeleft",function(){
   alert('swiped left');
  });
   $("p").on("swiperight",function(){
   alert('swiped right');
  });
});
</script>
</head>
<body>

<div data-role="page" id="pageone">
  <div data-role="header">
  </div>

  <div data-role="main" class="ui-content">
    <p style="background:red; height:250px; font-size:50px">If you swipe me in the left or right, an event will be triggered.</p>

  </div>

  </div>

</body>
</html>

选项卡面板可以在移动视图中轻扫吗？

2 个答案: