JQuery滚动/分页选项卡

我正在尝试为网站创建一个简单的标签栏，该标签栏能够滚动页面上不适合的标签。 这非常简单，不需要任何ajax或动态加载的内容……它只显示所有选项卡，当您单击一个选项卡时，它会将您带到另一个页面。

我在互联网上搜索过，除了以下内容之外似乎找不到任何东西： http ： //www.extjs.com/deploy/dev/examples/tabs/tabs-adv.html但是这个非常沉重和复杂…我是在jquery中寻找一个轻量级的例子。 如果有人可以提供帮助，我将不胜感激！

Answer 1

最后我自己写了一个div，溢出被设置为隐藏。 然后使用下面的jquery移动div中的选项卡。

$(document).ready(function() { $('.scrollButtons .left').click(function() { var content = $(".tabs .scrollable .content") var pos = content.position().left + 250; if (pos >= 0) { pos = 0; } content.animate({ left: pos }, 1000); }); $('.scrollButtons .right').click(function() { var content = $(".tabs .scrollable .content") var width = content.children('ul').width(); var pos = content.position().left - 250; //var width = content.width(); if (pos <= (width * -1) + 670) { pos = (width * -1) + 600; } content.animate({ left: pos }, 1000); }); }); 

我的Html看起来像这样：

  
 
 
 
 
Tab1
 
Tab2
 
Tab3
 
Tab4
 
Tab5
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  

Answer 2

我自己刚创建了一个插件：Project home： http ： //jquery.aamirafridi.com/jst

Answer 3

你能简单地用CSS中的overflow-x：auto设置DIV中的标签吗？

Answer 4

我总是使用JQuery UI选项卡作为选项卡的起点。 您可以在网站的下载部分自定义JQuery UI下载。 如果您已在您的网站上使用JQuery，则此方法应该比任何其他实现轻。

开箱即用，JQuery UI选项卡不会为您提供所需的滚动。 我相信这可以通过改变CSS来实现，但如果你改变网站的导航（即创建更多关卡，使用更短的标题），可能会更容易。

希望这可以帮助