JQueryを使用した垂直タブ

Question

私は、ページの左側に沿って、タブを上からずらしたい。私はすでに他の理由（効果）のためにjQueryをロードしているので、別のUIフレームワークにjQueryを使用する方が好きです。 「垂直タブjquery」を検索すると、進行中の作業へのリンクが得られます。

解決策があると、サンプルコードを投稿する価値はないと思われるブラウザを縦断的に扱うようになっていますか？

Answer 1

縦型のタブでは、横向きのタブとは別のJavascriptが必要と思われません。異なるのは、ページ上にタブとコンテンツを表示するためのCSSだけです。 JSのタブは一般的にコンテンツを表示/非表示/多分ロードするだけです。

Answer 2

はここに試してみてください。

http://www.sunsean.com/idTabs/

を自由タブを見ては、あなたが必要なものを持っているかもしれません。

好きなものが見つかったら教えてください。私は数ヶ月前にまったく同じ問題に取り組み、自分自身を実装することに決めました。私がやったことが好きですが、標準ライブラリを使うのは良いことでした。

Answer 3

Listamaticをご覧ください。タブは、特定の方法でスタイル付けされた項目の意味的な単なるリストです。あなたはListamaticショーのさまざまな例として垂直タブを動作させるためにjavascriptが必要なわけでもありません。

Answer 4

私は、ページの中央で垂直メニューとタブを変更しました。私は、コードソース上の2つの単語を変更し、私は離れて二つの異なる複数のdiv

設定

メニュー：

<div class="arrowgreen"> 
    <ul class="tabNavigation"> 
    <li> <a href="#first" title="Home">Tab 1</a></li> 
    <li> <a href="#secund" title="Home">Tab 2</a></li> 
    </ul> 
</div> 

内容：コードはdivの離れ

$(function() { 
    var tabContainers = $('div.pages > div'); 

    $('div.arrowgreen ul.tabNavigation a').click(function() { 
     tabContainers.hide().filter(this.hash).show(); 

     $('div.arrowgreen ul.tabNavigation a').removeClass('selected'); 
     $(this).addClass('selected'); 

     return false; 
    }).filter(':first').click(); 
}); 

Answer 5

で動作します

<div class="pages"> 
    <div id="first"> 
    CONTENT 1 
    </div> 
    <div id="secund"> 
    CONTENT 2 
    </div> 
</div> 

the jQuery UI vertical Tabs Docuをご覧ください。 私はそれを試して、それは正常に働いた。

<style type="text/css"> 
/* Vertical Tabs 
----------------------------------*/ 
.ui-tabs-vertical { width: 55em; } 
.ui-tabs-vertical .ui-tabs-nav { padding: .2em .1em .2em .2em; float: left; width: 12em; } 
.ui-tabs-vertical .ui-tabs-nav li { clear: left; width: 100%; border-bottom-width: 1px !important; border-right-width: 0 !important; margin: 0 -1px .2em 0; } 
.ui-tabs-vertical .ui-tabs-nav li a { display:block; } 
.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-selected { padding-bottom: 0; padding-right: .1em; border-right-width: 1px; border-right-width: 1px; } 
.ui-tabs-vertical .ui-tabs-panel { padding: 1em; float: right; width: 40em;} 
</style> 

<script> 
    $(document).ready(function() { 
     $("#tabs").tabs().addClass('ui-tabs-vertical ui-helper-clearfix'); 
     $("#tabs li").removeClass('ui-corner-top').addClass('ui-corner-left'); 

    }); 
</script> 

Answer 6

別のオプションは、マッテオBicocchiのjQueryのmb.extruderタブプラグインです： http://pupunzi.open-lab.com/mb-jquery-components/jquery-mb-extruder/

Answer 7

//o_O\\ (Poker Face) i know its late 

だけCSSスタイルbeloww

UPDATED

<style type="text/css"> 

    /* Vertical Tabs ----------------------------------*/ 
.ui-tabs-vertical { width: 55em; } 
.ui-tabs-vertical .ui-tabs-nav { padding: .2em .1em .2em .2em; float: left; width: 12em; } 
.ui-tabs-vertical .ui-tabs-nav li { clear: left; width: 100%; border-bottom-width: 1px !important; border-right-width: 0 !important; margin: 0 -1px .2em 0; } 
.ui-tabs-vertical .ui-tabs-nav li a { display:block; } 
.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-selected { padding-bottom: 0; padding-right: .1em; border-right-width: 1px; border-right-width: 1px; } 
.ui-tabs-vertical .ui-tabs-panel { padding: 1em; float: right; width: 40em;} 

</style> 

を追加します！あなたがここにあなた自身のタブ/アコーディオン構造を作成することができますhttp://jqueryui.com/tabs/#vertical

Answer 8

超シンプルな機能：http://jsfiddle.net/nabeezy/v36DF/

bindSets = function (tabClass, tabClassActive, contentClass, contentClassHidden) { 
     //Dependent on jQuery 
     //PARAMETERS 
     //tabClass: 'the class name of the DOM elements that will be clicked', 
     //tabClassActive: 'the class name that will be applied to the active tabClass element when clicked (must write your own css)', 
     //contentClass: 'the class name of the DOM elements that will be modified when the corresponding tab is clicked', 
     //contentClassHidden: 'the class name that will be applied to all contentClass elements except the active one (must write your own css)', 
     //MUST call bindSets() after dom has rendered 

     var tabs = $('.' + tabClass); 
     var tabContent = $('.' + contentClass); 
     if(tabs.length !== tabContent.length){console.log('JS bindSets: sets contain a different number of elements')}; 
     tabs.each(function (index) { 
      this.matchedElement = tabContent[index]; 
      $(this).click(function() { 
       tabs.each(function() { 
        this.classList.remove(tabClassActive); 
       }); 
       tabContent.each(function() { 
        this.classList.add(contentClassHidden); 
       }); 
       this.classList.add(tabClassActive); 
       this.matchedElement.classList.remove(contentClassHidden); 
      }); 
     }) 
     tabContent.each(function() { 
      this.classList.add(contentClassHidden); 
     }); 

     //tabs[0].click(); 
    } 
bindSets('tabs','active','content','hidden');