Как проверить наличие класса у элемента?

Question

[eellazy]

Сделал блок с информацией о видео в виде бутстраповских табов

Сам сайт



Мне нужно чтобы при нажатии на "15-35 мин." у "0-15 мин" оставалась красная полоса снизу. Это своего рода должен быть индикатор. Но, если нажать на "0-15 мин" то у остальных элементов должна пропадать эта полоса.

Так же и с последним элементом. Если на него нажать то у всех предыдущих должна быть красная полоса

Скриншот как нужно



Как можно реализовать такую штуку?

Comments

[Сергей delphinpro]

Расположите табы в html коде в обратном порядке.
В стилях поменяйте float: left на float: right, если у вас bs3 или flex-direction:row-reverse, если bs4
Для закраски применяйте сестринский селектор

.active { border-color: red;}
.active ~ li { border-color: red;}

[Сергей delphinpro]

codepen.io/anon/pen/vmmNOq

Answer 1

[Андрей Токмаков]

codepen.io/anon/pen/mWNLMv

Comments

[Сергей delphinpro]

codepen.io/anon/pen/qmmOEQ?editors=1010

$('#myTab').on('click', 'li', function() {
  var activeItem = $(this).index();
  $(this).parent().children().removeClass("active")
    .filter(':lt(' + (activeItem + 1) + ')').addClass("active"); 
});

Answer 2

[Yustas Alexu]

$('.my-selector').hasClass('my-class');
Документация

Comments

[eellazy]

Он не работает в диначеском режиме

[Yustas Alexu]

eellazy: можно сделать проще. Добавить атрибут minutes со значениями 15, 35, 42. При переходе на следующий шаг или возврате заносить значение атрибута в переменную. Затем взять все три элемента с промежутками времени и если у элемента этот атрибут меньше или равно текущему значению, то красить его в красный.