Question

我正在尝试为网站创建一个简单的标签栏，该标签栏能够滚动页面上不适合的标签。这非常简单，不需要任何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看起来像这样：

    <div class="tabs">
    <div class="scrollable">
        <div class="content">
            <ul>
                <li>Tab1</li>
                <li>Tab2</li>
                <li>Tab3</li>
                <li>Tab4</li>
                <li>Tab5</li>                    
                </ul>
        </div>
    </div>
    <div class="scrollButtons">
        <ul>
            <li>
                <div class="left">
                </div>
            </li>
            <li>
                <div class="right">
                </div>
            </li>
        </ul>
    </div>
</div>

Answer 2

我刚刚创建了一个插件：项目主页：http://jquery.aamirafridi.com/jst

Answer 3

你能简单地将标签包装在一个带有overflow-x：auto设置的DIV中吗？

Answer 4

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

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

希望这有帮助

JQuery滚动/分页选项卡

4 个答案: