タブはページの上部ではなく左側に置きたいです。他の理由 (エフェクト) で既に jQuery をロードしているので、別の UI フレームワークよりも jQuery を使うことを好みます。「垂直タブ jquery」で検索すると、進行中の作業へのリンクが表示されます。
垂直タブを複数のブラウザで動作させるのは困難なのでしょうか、それとも非常に簡単なので、一度解決策が見つかれば、サンプル コードを投稿する価値がないのでしょうか。
ベストアンサー1
見て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>