jQuery के साथ सरल टैब कैसे बनाएं?

किसी वेबसाइट पर टैब बनाते समय, आपको जंप लिंक के काम न करने जैसी समस्याओं का सामना करना पड़ सकता है सीएमएस सिस्टम. इससे टैब की गई सामग्री अपेक्षा के अनुरूप प्रदर्शित नहीं हो सकती है। इस समस्या को हल करने के लिए, यह सुनिश्चित करना महत्वपूर्ण है कि HTML और jQuery कोड सही ढंग से लागू किया गया है।

आइए निम्नलिखित HTML कोड पर विचार करें:

test1
  
test2
  
test3
  
test4
Some content
Some content
Some content
Some content

और निम्नलिखित jQuery कोड:

$('#tabs li a:not(:first)').addClass('inactive');
$('.container').hide();
$('.container:first').show();
$('#tabs li a').click(function() {
  var t = $(this).attr('href');
  $('#tabs li a').addClass('inactive');        
  $(this).removeClass('inactive');
  $('.container').hide();
  $(t).fadeIn('slow');
  return false;
})

if($(this).hasClass('inactive')){ //this is the start of our condition 
  $('#tabs li a').addClass('inactive');         
  $(this).removeClass('inactive');
  $('.container').hide();
  $(t).fadeIn('slow');    
}

इस मामले में, समस्या एंकर टैग की href विशेषता के साथ जुड़ी हुई प्रतीत होती है। जब उपयोगकर्ता किसी टैब पर क्लिक करता है, तो href विशेषता जंप लिंक का उपयोग करके ब्राउज़र को पृष्ठ के एक विशिष्ट अनुभाग पर निर्देशित करती है। चूंकि जंप लिंक आपके सीएमएस में काम नहीं कर रहे हैं, इसलिए टैब की गई सामग्री सही ढंग से प्रदर्शित नहीं हो रही है।

इसे ठीक करने के लिए, हम अनुभाग नाम के बजाय आईडी का उपयोग करने के लिए href विशेषता को बदल सकते हैं। इसके अतिरिक्त, हमें सही टैब सामग्री दिखाने के लिए आईडी विशेषता का उपयोग करने के लिए jQuery कोड को अपडेट करने की आवश्यकता है।

यहां अपडेट किया गया HTML है:

test1
  
test2
  
test3
  
test4
Some content
Some content
Some content
Some content

और अद्यतन jQuery:

$('#tabs li a').click(function() {
  var t = $(this).attr('id');

  if($(this).hasClass('inactive')){ //this is the start of our condition 
    $('#tabs li a').addClass('inactive');           
    $(this).removeClass('inactive');

    $('.container').hide();
    $('#'  t   'C').fadeIn('slow');
 }
});

आईडी का उपयोग करके और आईडी विशेषता का उपयोग करने के लिए jQuery कोड को समायोजित करके, हम यह सुनिश्चित कर सकते हैं कि जब उपयोगकर्ता टैब पर क्लिक करता है तो सही टैब सामग्री प्रदर्शित होती है, भले ही जंप लिंक अक्षम हों।