كيفية إنشاء علامات تبويب بسيطة باستخدام jQuery؟

عند إنشاء علامات تبويب على موقع ويب، قد تواجه مشكلات مع روابط الانتقال التي لا تعمل في بعض الأماكن أنظمة إدارة المحتوى (CMS). يمكن أن يؤدي هذا إلى عدم عرض المحتوى المبوب كما هو متوقع. لحل هذه المشكلة، من المهم التأكد من تنفيذ كود 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 بتوجيه المتصفح إلى قسم معين من الصفحة باستخدام روابط الانتقال. نظرًا لأن روابط الانتقال السريع لا تعمل في نظام إدارة المحتوى (CMS) الخاص بك، فإن المحتوى المبوب لا يتم عرضه بشكل صحيح.

لإصلاح هذه المشكلة، يمكننا تغيير سمة 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 لاستخدام سمة المعرف، يمكننا ضمان عرض محتوى علامة التبويب الصحيح عندما ينقر المستخدم على علامة تبويب، حتى عندما تكون روابط الانتقال معطلة.