如何在中繼器/網格控件中實現Jquery選項卡？

Question

我有一箇中繼器控制。在每個元素/記錄中，我有一個帶有2個選項卡的標籤界面。我正在用Jquery實現選項卡功能。但每次點擊頁面上的任何標籤時，只有第一個元素/記錄的選項卡正在切換。請讓我知道如何做到這一點。

<ul class="tabs"> 
    <li><a href="#tab1">Gallery</a></li> 
    <li><a href="#tab2">Submit</a></li> 
</ul> 

<div class="tab_container"> 
    <div id="tab1" class="tab_content"> 
     <!--Content--> 
    </div> 
    <div id="tab2" class="tab_content"> 
     <!--Content--> 
    </div> 
</div> 



$(document).ready(function() { 

    //When page loads... 
    $(".tab_content").hide(); //Hide all content 
    $("ul.tabs li:first").addClass("active").show(); //Activate first tab 
    $(".tab_content:first").show(); //Show first tab content 

    //On Click Event 
    $("ul.tabs li").click(function() { 

     $("ul.tabs li").removeClass("active"); //Remove any "active" class 
     $(this).addClass("active"); //Add "active" class to selected tab 
     $(".tab_content").hide(); //Hide all tab content 

     var activeTab = $(this).find("a").attr("href"); //Find the href attribute  value to identify the active tab + content 
     $(activeTab).fadeIn(); //Fade in the active ID content 
     return false; 
    }); 

}); 

Answer 1

由於您正在使用ids來標記中繼器中的內容div，所有的repeater元素都會有相同的id，所以你的邏輯不會。試試這個

$(document).ready(function() { 

    //When page loads... 
    $(".tab_content").hide(); //Hide all content 
    $("ul.tabs > li:first-child").addClass("active").show(); //Activate first tab 
    $(".tab_content:first-child").show(); //Show first tab content 

    //On Click Event 
    $("ul.tabs > li").click(function() { 

     $(this).siblings().removeClass("active"); //Remove any "active" class 
     $(this).addClass("active"); //Add "active" class to selected tab 

     var $tabContents = $(this).parent().next().children(); 
     $tabContents.hide(); //Hide all tab content 

     // var activeTab = $(this).find("a").attr("href"); //Find the href attribute  value to identify the active tab + content 

     //Use the index() method to get the tab to show 
     $tabContents.eq($(this).index()).fadeIn(); 

     return false; 
    }); 

}); 

還設置錨的href屬性javascript:void(0)否則，當您單擊該選項卡頁面將滾動。