Fundacja ZURB, zakładka przełączająca programowo

Question

Czy używam asp z fundamentem, czy mimo to można przełączać się między kartami za pomocą JS lub ASP?

Link (Prosta karta).

Answer 1

Możliwe rozwiązanie polega na przypisaniu identyfikatora do łącza zakładkowego i kliknięciu go za pomocą jQuery.

Biorąc pod uwagę następujący fragment kodu, zauważy ID przypisane do łącza kotwicy ...

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

Można aktywować link, za pomocą tej linii jQuery.

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

Answer 2

W wersji 3.0 można ustawić klasę active na karcie dl.tabs dd i ul.tabs-content li je przełączać. Możesz to zrobić w kodzie lub w JavaScript.

Answer 3

Można to zrobić bez dodawania identyfikatora do każdego elementu listy i utrzymywania wartości mieszania w lokalizacji adresu URL.

Powiedzmy masz ten kod:

<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> 

Następnie można to zrobić w dowolnym miejscu na stronie:

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

Answer 4

Jeśli dasz pierwszą kartę i pierwsze LI .active domyślnie 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> 

Następnie można zmienić kartę w 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

spróbuj tego:

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

i ten poprzedni przycisk (jeśli trzeba)

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

To działa dla mnie ...