当需要时，HTML选项卡会显示幻灯片
我有一种情况，我想显示一些标签在一个有限的区域。我想知道我是否可以设置它，以便在两端都有箭头，并能够单击将隐藏的选项卡显示到视图中。或者在没有他的情况下，抓住标签条，来回移动，就像我需要的那样
例如，我可能有10个选项卡，但只有查看5的空间
表1表2 Tab 3 Tab 4 Tab 5 Tab 6 Tab 7 Tab 8 Tab 9 Tab 10
表1-5可见，表6-10隐藏.我想要能够箭头横过或拖过去，使表6-10可见。当我这样做的时候，1-5被隐藏起来。
单击右(或左)箭头或每个拖动应移动一个选项卡。
回答 1
Stack Overflow用户
发布于 2014-11-20 15:19:34
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
https://stackoverflow.com/questions/27008696
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号