JQuery滾動/分頁選項卡

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

我自己剛剛創建了一個插件：Project home： http ： //jquery.aamirafridi.com/jst

Answer 3

你能簡單地用CSS中的overflow-x：auto設置DIV中的標簽嗎？

Answer 4

我總是使用JQuery UI選項卡作為選項卡的起點。 您可以在網站的下載部分自定義JQuery UI下載。 如果您已經在您的網站上使用JQuery，則此方法應該比任何其他實現更輕。

開箱即用，JQuery UI選項卡不會為您提供所需的滾動。 我相信這可以通過改變CSS來實現，但如果你改變網站的導航（即創建更多關卡，使用更短的標題），可能會更容易。

希望這可以幫助