需要时滑动的 HTML 选项卡答案

【问题标题】：HTML Tabs that slide when needed需要时滑动的 HTML 选项卡
【发布时间】：2014-11-19 03:57:22
【问题描述】：

我有一种情况，我想在有限的区域内显示多个选项卡。我想知道是否可以将其设置为两端都有箭头，并且能够单击以将隐藏的选项卡显示出来。或者甚至在他移动时抓住标签条，并根据需要来回移动它

例如，我可能有 10 个标签，但只有 5 个可以查看的空间

选项卡 1 选项卡 2 选项卡 3 选项卡 4 选项卡 5 选项卡 6 选项卡 7 选项卡 8 选项卡 9 选项卡 10

标签 1-5 可见，标签 6-10 隐藏。我希望能够通过箭头或拖动以使选项卡 6-10 可见。当我这样做时，标签 1-5 会被隐藏

每次点击右（或左）箭头或每次拖动都应移动一个标签

【问题讨论】：

您正在描述一个轮播。用那个关键字谷歌，有无数可用的库。
我认为你期待这样的lopatin.github.io/sliderTabs
感谢 Pandiyan Cool，这正是我所追求的
我看不出有什么特别的理由来标记这个jquery-ui。因此我删除了它并添加了html，这似乎更合适

标签： jquery css html

【解决方案1】：

jQuery Slider Tabs

第 1 步：包含文件

将包解压缩到您的工作目录中，并将它们包含在您的 head 部分中，如下所示。确保在插件之前包含 jQuery。

<head>
<link rel="stylesheet" href="styles/jquery.sliderTabs.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="js/jquery.sliderTabs.min.js"></script>
</head>

第 2 步：标记

首先创建一个 div 元素，首先包括选项卡的链接列表，然后为面板创建相同数量的 div 元素。要将 div 面板链接到选项卡，请确保选项卡链接的 href 属性为“#IdOfPanel”。请注意，即使您计划禁用选项卡，选项卡列表也是必需的标记，因为插件的其他部分（如指标）取决于这些声明。这是一个基本示例。

<div id="mySliderTabs">
  <!-- Unordered list representing the tabs -->
  <ul>
    <li><a href="#canyon">The Grand Canyon</a></li>
    <li><a href="#taj">The Taj Mahal</a></li>
    <li><a href="#bigben">Big Ben</a></li>
  </ul>

  <!-- Afterwards, include the div panels representing the panels of our slider -->
  <div id="canyon">
    <h3>The Grand Canyon</h3>
    <!-- rest of the panel content -->
  </div>
  <div id="taj">
    <h3>The Taj Mahal</h3>
    <!-- rest of the panel content -->
  </div>
  <div id="bigben">
    <h3>Big Ben</h3>
    <!-- rest of the panel content -->
  </div>
</div>

第 3 步：调用插件

然后使用 jQuery 选择容器 div 并在其上调用 sliderTabs()。

var slider = $("div#mySliderTabs").sliderTabs();
... or specify some options. View a full list of available options in the next section.

var slider = $("div#mySliderTabs").sliderTabs({
  autoplay: true,
  mousewheel: false,
  position: "bottom"
});

Reference

Download

【讨论】：