ページの上部ではなく左側にタブが必要です。他の理由（効果）ですでにjQueryをロードしているので、別のUIフレームワークよりもjQueryを使用することを好みます。「垂直タブjquery」で検索すると、進行中の作業へのリンクが表示されます。
垂直タブをブラウザ間で機能させるのは面倒なことですか、それとも簡単なことなので、解決策を見つけたら、サンプルコードを投稿する価値がないように思われますか？
回答:
見ていjQueryのUI垂直タブドキュを。私はそれを試してみました、それはうまくいきました。
<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>
ここで試してください：
http://www.sunsean.com/idTabs/
[自由]タブを見ると、必要なものがあるかもしれません。
気に入ったものがあれば教えてください。私は数ヶ月前にまったく同じ問題に取り組み、自分で実装することにしました。私は自分のやったことが好きですが、標準ライブラリを使用するのは良かったかもしれません。
ページの中央で変化する垂直メニューとタブを作成しました。コードソースの2つの単語を変更し、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 class="pages">
<div id="first">
CONTENT 1
</div>
<div id="secund">
CONTENT 2
</div>
</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();
});
//o_O\\ (Poker Face) i know its late
以下のCSSスタイルを追加するだけです
<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>
見ていListamaticを。タブは、意味的には特定の方法でスタイル設定されたアイテムの単なるリストです。Listamaticショーのさまざまな例のように、垂直タブを機能させるために、必ずしもjavascriptは必要ありません。
ここで独自のタブ/アコーディオン構造を作成できる非常にシンプルな関数：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');