ZURB Foundation、プログラムでタブを切り替える

Question

私はfoundationを使用してaspを使用していますが、JSとASPを使用して別のタブに切り替えるにはどうしてですか？

Link（簡易タブ）。

Answer 1

可能な解決策は、タブリンクにidを割り当て、jQueryを使用してそれをクリックすることです。次のコードの抜粋を考える

、アンカーリンクに割り当てられたIDに気づく...

<dd><a href="#simple2" id="tabId">Simple Tab 2</a></dd> 

あなたはjQueryの行を使用して、このリンクを活性化できます。バージョン3.0では

$("#tabId").click(); 

Answer 2

あなたはそれらを切り替えるには、タブdl.tabs ddとul.tabs-content liにactiveのクラスを設定することができます。これはコードやJavaScriptで行うことができます。

Answer 3

各リスト項目にIDを追加したり、ハッシュをURLの場所に保存したりすることなく、これを行うことができます。

のは、あなたがこのコードを持っているとしましょう：

<div id="my-menu" class="menu"> 
    <ul class="vertical tabs"> 
     <li class="active"><a href="#overview">Overview</a></li> 
     <li><a href="#feedback">Feedback</a></li> 
    </ul> 
    </div> 

次に、ページ上でこのどこかの操作を行うことができます

<a href="#feedback" onclick="$('#my-menu a[href=\'#feedback\']').click()">Feedback</a> 

Answer 4

あなたは、デフォルトでは最初のタブと第一のLI .activeを与える場合HTMLは、

<div id="#TheTabs" class="twelve columns"> 

    <dl class="nice contained tabs"> 
     <dd><a href="#FirstTab" class="active">First Tab</a></dd> 
     <dd><a href="#SecondTab">Second Tab</a></dd> 
    </dl> 

    <ul class="nice contained tabs-content"> 
     <li id="FirstTabLI" class="active"> 
      <div class="row"> 
       <div class="twelve columns"> 
       </div> 
      </div> 
     </li> 
     <li id="SecondTabLI"> 
      <div class="row"> 
       <div class="twelve columns"> 
       </div> 
      </div> 
     </li> 
    </ul> 

</div> 

は、その後、あなたは、JavaScriptでタブを変更することができます

if (activeTab == 2) { 

    // Clear tab 1 
    $('#TheTabs dl dd a[href="#FirstTab"]').removeClass("active"); 
    $('#FirstTabLI').removeClass("active"); 

    // Select tab 2 
    $('#TheTabs dl dd a[href="#SecondTab"]').addClass("active"); 
    $('#SecondTabLI').addClass("active"); 

} 

Answer 5

これを試してみてください。

$('#yourTabsContainer').on('click', '.yourNextButton', function(event) { 
     event.preventDefault(); 
     $('.active').removeClass('active').next().addClass('active'); 
}); 

とそれは私のために働いて、この前のボタン（必要な場合）

$('#yourTabsContainer').on('click', '.yourPreviousButton', function(event) { 
     event.preventDefault(); 
     $('.active').removeClass('active').prev().addClass('active'); 
}); 

...