Как создавать простые вкладки с помощью 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, чтобы использовать атрибут id для отображения правильного содержимого вкладки.

Вот обновленный 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 для использования атрибута id, мы можем гарантировать, что правильное содержимое вкладки отображается, когда пользователь нажимает на вкладку, даже если ссылки перехода отключены.