$('#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"this.className.slice(0, 2)
const breakpoint = window.matchMedia("(max-width: 1200px)");// Version: 2.9.1
.tns-outer {
padding: 0 !important; // remove padding: clientWidth = width + padding (0) = width
[hidden] { display: none !important; }
[aria-controls], [data-action] { cursor: pointer; }
}
.tns-slider {
-webkit-transition: all 0s;
-moz-transition: all 0s;
transition: all 0s;
> .tns-item {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
}
.tns-horizontal {
&.tns-subpixel {
white-space: nowrap;
> .tns-item {
display: inline-block;
vertical-align: top;
white-space: normal;
}
}
&.tns-no-subpixel {
&:after {
content: '';
display: table;
clear: both;
}
> .tns-item {
float: left;
}
}
&.tns-carousel {
&.tns-no-subpixel {
> .tns-item {
margin-right: -100%;
}
}
}
}
.tns-no-calc {
position: relative;
left: 0;
}
.tns-gallery {
position: relative;
left: 0;
min-height: 1px; // make sure slider container is visible
// overflow: hidden;
> .tns-item {
position: absolute;
left: -100%;
-webkit-transition: transform 0s, opacity 0s;
-moz-transition: transform 0s, opacity 0s;
transition: transform 0s, opacity 0s;
}
> .tns-slide-active {
position: relative;
left: auto !important;
}
> .tns-moving {
-webkit-transition: all 0.25s;
-moz-transition: all 0.25s;
transition: all 0.25s;
}
}
.tns-autowidth { display: inline-block; }
.tns-lazy-img {
-webkit-transition: opacity 0.6s;
-moz-transition: opacity 0.6s;
transition: opacity 0.6s;
opacity: 0.6;
&.tns-complete { opacity: 1; }
}
.tns-ah {
-webkit-transition: height 0s;
-moz-transition: height 0s;
transition: height 0s;
}
.tns-ovh { overflow: hidden; }
.tns-visually-hidden { position: absolute; left: -10000em; }
.tns-transparent { opacity: 0; visibility: hidden; }
.tns-fadeIn {
opacity: 1;
filter: alpha(opacity=100);
z-index: 0;
}
.tns-normal, .tns-fadeOut {
opacity: 0;
filter: alpha(opacity=0);
z-index: -1;
}
// *** Fix a viewport issue in initialization
.tns-vpfix {
white-space: nowrap;
> div, > li {
display: inline-block;
}
}
// *** Detecting browser capability ***
$width: 310px;
$height: 10px;
$count: 70;
$perpage: 3;
.tns-t {
&-subp2 {
margin: 0 auto;
width: $width;
position: relative;
height: $height;
overflow: hidden;
}
&-ct {
width: (100% * $count / $perpage);
width: -webkit-calc(100% * #{$count} / #{$perpage});
width: -moz-calc(100% * #{$count} / #{$perpage});
width: calc(100% * #{$count} / #{$perpage});
position: absolute;
right: 0;
&:after {
content: '';
display: table;
clear: both;
}
> div {
width: (100% / $count);
width: -webkit-calc(100% / #{$count});
width: -moz-calc(100% / #{$count});
width: calc(100% / #{$count});
height: $height;
float: left;
}
}
}