JQuery 滚动/分页选项卡 [英] JQuery Scrolling/Paging Tabs

问题描述

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

I am trying to create a simple tab bar for a site that has the ability to scroll for tabs that do not fit on the page. This is quite simple and does not need to have any ajax or dynamically loaded content...it simply displays all the tabs, and when you click one, it takes you to another page.

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

I have scoured the internet and can not seem to find anything other than: http://www.extjs.com/deploy/dev/examples/tabs/tabs-adv.html however this is very heavy and complicated...I am looking for a lightweight example in jquery. If anyone can help I would be grateful!

推荐答案

我最终自己编写了一个 div，它的溢出设置为隐藏.然后使用下面的jquery来移动div中的标签.

I ended up writing it myself with a div who's overflow is set to hidden. Then used the jquery below to move the tabs in the 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 看起来像这样:

My Html looked like this:

    <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>

这篇关于JQuery 滚动/分页选项卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！