asp.netのCSSの垂直タブ

Question

私はajaxコントロールツールキットのタブコンテナのように表示されるcssを使用して垂直タブメニューが必要です。second example in the linkを参照してください。私はajaxコントロールツールキットを使用せずにcssでこれを達成する必要があります。

Answer 1

あなたはそれが生成するCSSを見て、状態を制御するためにjQueryのスクリプトを作成し、そのようにすることができますいくつかのHTMLなどで

$(document).ready(function() {  
    var tabs = $('div.tabs > div'); 
    tabs.hide().filter(':first').show(); 

    $('ul.tab_nav li a').click(function() { 
     tabs.hide(); 
     tabs.filter(this.hash).show(); 
     $('ul.tab_nav li a').parent().removeClass('selected'); 
     $(this).parent().addClass('selected'); 
     return false; 
    }).filter(':first').click(); 
} 

：

<ul class="tab_nav"> 
    <li><a href="#tab-1">Tab 1</a></li> 
    <li><a href="#tab-2">Tab 2</a></li> 
</ul> 
<div class="tabs"> 
    <div id="tab-1"> 
     Tab 1 
    </div> 
    <div id="tab-2"> 
     Tab 2 
    </div> 
</div>