Jquery при смени класса не отрабатывает таб?

Question

[Sergey]

Всем привет, есть код на jquery, не пойму почему если меняеться класс дива .t1 к примеру на див .tc2 так же замена его в js, не отрабатываюит табы .. И тоже самое происходит с лишками если изменить клас у li так же код не отрабатывает.

<ul id="menu-tabs" class="tabs">
			<li class="t1"><a href="#">1</a></li>
			<li class="t2"><a href="#">2</a></li>
			<li class="t3"><a href="#">3</a></li>
		</ul>
		<div class="tab-content">
			<div class="t1 tab">
				<div class="block">1grey \ blue</div>
			</div>
			<div class="t2 tab">
				<div class="block">2grey \ blue</div>
			</div>
			<div class="t3 tab">
				<div class="block">3grey \ blue</div>
			</div>
		</div>

$('#menu-tabs li').click(function(){
	$('div.t1').hide();
	$('div.t2').hide();
	$('div.t3').hide();
	$('div.' + this.className.slice(0,2)).fadeIn(500);
	$('#menu-tabs li').removeClass('active');
	$(this).addClass('active');
	return false;
});

Comments

[rifat2125]

Дело в том, что при клике на элемент ЛИ, вы пытаетесь получить название класса самого ЛИ и делаете это таким образом:
this.className.slice(0, 2)
Вы вырезаете из строки с классами первые два символа. Если вы заменяете класс ЛИ на tc2, то при вырезании получаете не полное имя класса (tc2), а всего лишь tc

Answer 1

[rifat2125]

Как вариант, можно вообще от имени класса зависимость убрать. Здесь мы работает с индексами.

const setNthActive = (index) => {
  $(".tab-content > div").hide();
  $(`.tab-content > div:nth(${index})`).fadeIn(500);
};

$("#menu-tabs li").click(function () {
  $("#menu-tabs li").removeClass("active");
  $(this).addClass("active");

  setNthActive($(this).index());
  return false;
});

setNthActive(0);

Comments

[Sergey]

Понял, у меня уже вопрос принципиальный, что не так в моем имено коде, не могли бы вы помочь разобрать ?

[rifat2125]

Я вам уже прокомментировал ранее, но видимо не понятно было)

$('#menu-tabs li').click(function(){
  $('div.t1').hide();
  $('div.t2').hide();
  $('div.t3').hide();
  $('div.' + this.className.slice(0,2)).fadeIn(500); // тут вы берете className у элемента Li при клике
  $('#menu-tabs li').removeClass('active');
  $(this).addClass('active');
  return false;
});

// К примеру, вы нажали на Li с классом t1 (<li class="t1"><a href="#">1</a></li>)
// this.className.slice(0,2) - вы берете class, то есть "t1", и при помощи slice вырезаете первые 2 символа - выходит е1
// Когда вы меняете class на "tc2" происходит тот же процесс и при этом длина вырезаемого текста не меняется (вырезаете 2 символа). А первые 2 символа из "tc2" - это "tc". 
// Соответственно скрипт пытается найти div с классом "tc", а не "tc2"

Надеюсь объяснил достаточно понятно)

Почитать про String.prototype.slice