問題描述

我正在嘗試為網站創(chuàng)建一個簡單的標簽欄，該網站能夠滾動查看頁面上不適合的標簽.這非常簡單，不需要任何 ajax 或動態(tài)加載的內容...它只是顯示所有選項卡，當您單擊一個選項卡時，它會將您帶到另一個頁面.

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.

我已經搜索了互聯(lián)網，似乎找不到任何其他東西: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 滾動/分頁選項卡的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！