jQuery, एक पृष्ठ पर कई टैब समूह

Question

मैं सोह तनाका से एक अच्छा सरल टैब उदाहरण का उपयोग कर रहा हूं। http://www.sohtanaka.com/web-design/simple-tabs-w-css-jquery

मैं एक ही पृष्ठ पर कई टैब समूह डालने की कोशिश कर रहा हूं फिर भी प्रत्येक टैब समूह के लिए समान कक्षाओं का उपयोग करता हूं। मैं टैब के लिए गतिशील रूप से सामग्री बना रहा हूं, इसलिए प्रत्येक टैब समूह के लिए नई कक्षाएं बनाना प्रश्न से बाहर है।

मैं अलग-अलग टैब समूहों के लिए समान कक्षाओं, एक ही jQuery का उपयोग कैसे करूं? मुझे पता है कि jQuery में उपलब्ध .each() विधि है, लेकिन मुझे इसे jQuery में रखने के लिए सही जगहों को जानने का प्रयास करने में परेशानी हो रही है। कोई भी मदद बहुत ही सराहनीय होगी।

अग्रिम धन्यवाद।

Answer 1

आपके द्वारा लिंक किए गए ब्लॉग एंट्री पर टिप्पणियों में, इसके बारे में एक चर्चा है। वह यहां एक डेमो से लिंक करता है: http://www.sohtanaka.com/web-design/examples/tabs/index3.htm

उस डेमो में, टैब तक पहुंचने के तरीके में बदलाव आया है।

$("div[class^='simpleTabs']").simpleTabs(); //Run function on any div with class name of "Simple Tabs" 

यह simpleTabs

Answer 2

के एक वर्ग मैं उदाहरण आपके द्वारा दी गई इस्तेमाल किया और एक दूसरे टैब समूह जोड़े गए एक div में अपने टैब वाले वर्गों लपेटकर द्वारा किया जाता है। आप इसे यहां देख सकते हैं: http://jsfiddle.net/eSHdb/1/

इसके अलावा, मुझे लगता है कि आपको कुछ उदाहरण कोड और आपके द्वारा किए गए कुछ उदाहरण कोड के साथ प्रयास करने की आवश्यकता है। ध्यान दें कि मेरा उदाहरण वास्तविक सुंदर नहीं है लेकिन इसे स्टाइल किया जा सकता है।

Answer 3

Soh तनाका द्वारा उदाहरण पृष्ठ से कोड बन्द रखो है कि आप अपने लेख में देखें:

$(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; 
}); 

}); 

महत्वपूर्ण बिट करने के लिए केवल स्विचन के प्रयोजनों के लिए मौजूदा टैब समूह का उल्लेख कोड तय करने के लिए है टैब के बीच। यह सुनिश्चित करके हासिल किया जाता है कि जहां वैश्विक संदर्भ वांछित नहीं है, केवल स्थानीय समूह, हम चयनकर्ता को बदलते हैं। टैब की एक सेट से उनकी सामग्री में संदर्भित करते समय, समस्या यह है कि एक दूसरे के साथ कैसे मिलान किया जाए, यह या तो कुछ सामान्य आईडी सिस्टम के साथ किया जा सकता है, या यदि टैब को उनकी सामग्री से पहले माना जाता है, बिना ओवरलैपिंग के, तो हम कर सकते हैं बस टैब सेट के साथ अगले tab_container ढूंढें।

पहले, initialisation:

$(".tab_content").hide(); 

ठीक है, हम उन सभी को छुपाना चाहते हैं।

$("ul.tabs li:first").addClass("active"); 
$(".tab_content:first").show(); 

अच्छा नहीं है, यह पृष्ठ पर सभी टैब समूहों को संदर्भित करेगा, विशिष्ट होने की आवश्यकता है।

$("ul.tabs").each(function() { 
    $(this).find('li:first').addClass("active"); 
    $(this).nextAll('.tab_container:first').find('.tab_content:first').show(); 
}); 

.click() घटना ठीक शुरू होता है, बाध्यकारी सभी ul.tabs li ठीक है। इसके अंदर चयनकर्ताओं की जरूरत है।

$("ul.tabs li").click(function() { 
    var cTab = $(this).closest('li'); 
    cTab.siblings('li').removeClass("active"); 
    cTab.addClass("active"); 
    cTab.closest('ul.tabs').nextAll('.tab_container:first').find('.tab_content').hide(); 

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

    return false; 
}); 

activeTab के साथ पिछले अनुभाग पहले से ही ठीक है, सिर्फ आईडी पुन: उपयोग के प्रति सावधान रहें।

डेमो देखें:http://jsfiddle.net/uyvUZ/1/

दिखने में आसान है, लेकिन विभिन्न डेमो:http://jsfiddle.net/uyvUZ/2/