Несколько табов на странице

[brezze]

Ребят помогите пожалуйста. https://codepen.io/brezze/pen/yPmvRv

На странице будет много таких табов, мне нужно что-бы если я кликал на вкладки нижнего таба, в верхнем не убирался класс current и текст оставался всегда видимым. Как этого достичь ?

[AlexWeb]

Вам нужно искать ближайшего общего родителя - container.

Расставлять атрибут ID блокам с контентом - не рекомендую. Воспользуйтесь тем же data-*, к примеру - data-tabContent

Соответственно, вам не придется помнить сколько у вас до этого было блоков с вкладками и сколько вкладок в каждом из блоков.

В каждом новом блоке можно начинать нумерацию вкладок с 1, т.к. с соседними блоками взаимодействовать больше не сможет.

Меняйте ID

<div data-tabContent="tab-1" class="tab-content">

Новый js

$(document).ready(function(){
  
	$('ul.tabs li').click(function(){
		var tab_id = $(this).attr('data-tab');
		var parent = $(this).closest('.container');		
      
		parent.find('ul.tabs li').removeClass('current');
		parent.find('.tab-content').removeClass('current');
      
		$(this).addClass('current');
		parent.find('[data-tabContent='+tab_id+']').addClass('current');
	});
  
});