JQuery 滚动/分页选项卡

Posted 2023-04-13

【中文标题】JQuery 滚动/分页选项卡

【英文标题】：JQuery Scrolling/Paging Tabs

【发布时间】：2010-12-01 05:06:32

【问题描述】：

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

我已经搜索了互联网，似乎找不到任何其他东西： http://www.extjs.com/deploy/dev/examples/tabs/tabs-adv.html 然而这是非常沉重和复杂的......我正在寻找一个在 jquery 中的轻量级示例。如果有人可以提供帮助，我将不胜感激！

【参考方案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>

【讨论】：

克里斯你还记得 css 吗？

我刚刚能够使用此代码并且效果很好。不过，我确实必须在脚本中将 left 替换为 marginLeft。 @Goran我为我的左右使用了一个标签，并将它们左右浮动，并将 .content 向左浮动。设置宽度和溢出：隐藏在 .content 上最终更改了 2 个脚本行 var pos = +content.css("marginLeft").replace("px", "") - 600;和 content.animate( marginLeft: pos , 1000);

【参考方案2】：

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

【讨论】：

嘿，你跟上了吗？似乎它不适用于较新版本的 JQuery 和 JQuery UI。在大多数情况下。

【参考方案3】：

你能简单地将标签包装在一个 DIV 中并在 CSS 中设置 overflow-x: auto 吗？

【参考方案4】：

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

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

希望对你有帮助