JQuery滾動/頁面選項卡

我正在嘗試爲能夠滾動頁面上不適合的選項卡的站點創建簡單的選項卡欄。這很簡單，不需要有任何ajax或動態加載的內容......它只是顯示所有選項卡，並且當您單擊一個選項卡時，會將您帶到另一個頁面。JQuery滾動/頁面選項卡

我已經走遍了互聯網，似乎無法找到比其他任何東西： http://www.extjs.com/deploy/dev/examples/tabs/tabs-adv.html 然而，這是非常沉重的，複雜的...我要尋找一個在jQuery的一個輕量級的例子。如果有人能幫助，我將不勝感激！

來源

2009-09-24 Chris Kooken

我結束了一個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>

來源

2009-10-02 20:07:47

克里斯你還記得它的CSS？ – 2013-06-25 08:06:42

我只是能夠使用這段代碼，它運作良好。我不得不在腳本中用marginLeft替換左邊。 @Goran我爲我的左右使用了一個標籤，並將它們左右浮動，然後將內容左移。設置寬度和溢出：隱藏在.content上最後更改了2個腳本行var pos = + content.css（「marginLeft」）。replace（「px」，「」） - 600;和content.animate（{marginLeft：pos}，1000）; – 2013-08-07 19:57:33

您是否可以簡單地將標籤封裝在帶有overflow-x：自動設置在CSS中的DIV中？

來源

2009-09-24 19:20:11 lod3n

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

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

希望這有助於

來源

2009-10-02 11:44:28 wiifm

我剛剛創建了一個插件自己：項目主頁：http://jquery.aamirafridi.com/jst

來源

2010-05-04 14:09:16

嘿，你在繼續嗎？它似乎不適用於新版本的JQuery和JQuery UI。大部分是這樣的。 – 2014-08-11 15:48:05

JQuery滾動/頁面選項卡

回答

相關問題