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