Хочу сделать табы на js. Посмотрите пожалуйста алгоритм и помогите с его недостающими частями

<div class="tabs-container">
       <div class="wrapper">
         <ul class="tabs-ul">
           <li class="f-title active">Первый</li>
           <li class="s-title">Второй</li>
           <li class="th-title">Третий</li>
           <li class="fo-title">Четвёртый</li>
           <li class="fi-title">Пятый</li>
         </ul>
         <div class="tabs-content">
           <li class="f-content">1</li>
           <li class="s-content">2</li>
           <li class="th-content">3</li>
           <li class="fo-content">4</li>
           <li class="fi-content">5</li>
         </div>
       </div>
     </div>
<!-- Алгоритм -->
При наступлени события клик на ul
$('.tabs-ul').addEventListener('click', function(){
});
1) Получаем все элементы таба и получаем все элементы контента
var listTabs = document.querySelectorAll('.tabs-ul li')
var listContent = document.querySelectorAll('.tabs-content li')
2) Проходимся циклом(цикл должен быть с индексом) по элементам таба и по элементам контейнера и удаляем класс ... (у таба, к примеру класс active-tab а у контент active-content)
3) Внутри элементов таба, проверяем если был совершён клик. Если был, то по индексу таба и контента ставим нужные классы

Всем привет, опубликовал проект на React на githubPages (https://catinears.github.io/Task-Scrile/)

Весь проект работает нормально, но с картинками какие то беды, никто не подскажет как лечится?

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

С какой адресацией? Пути к картинкам правильно указывал?

Да, у меня локально всё работает, а на gh-pages проблемы

Покажи как ты указываешь путь к картинке

/ - это корень директории, естественно там нет картинок

Ок, сейчас попробую без

Помогло, спасибо за помощь)

спасибо, Александр! Скажите пожалуйста, а что не так здесь? Почему не добавляется при клике класс content-active ?
https://codepen.io/Alexei_87/pen/BaRgKMK?editors=1011

https://jsfiddle.net/q2f8xgot/2/
Чуть красивше)

// 3) Совершаем цикл, проверяем по какому элементу был совершён клик. Им(tabs-ul li и tabs-content li) ставим нужные классы
         

           for (let i = 0; i < listTabs.length; i++){
             let tab = listTabs[i]
              tab.addEventListener('click', () => {
                  tab.classList.add('content-active');
              })
           }

Вот так работает. анонимная функция сохранит контекст, а сохраненный в переменную tab будет доступен через замыкание в анонимной функции

Но код ужасно написан, по каждому клику вешается новый addEventListener на элементы, и после 100 кликов, все это будет выполняться по 100 раз. Бери мою реализацию)

не работает как надо. Не появляется содержимое tabs-content. Маркеры почему-то исчезают

я не совсем понимаю вашу реализацию. Может у вас по другому отображается, но у меня вот так

ну я ставлю табу класс, и контейнеру в котором этот таб размещен. Не это надо было?

нужна реализация табов, примерно как в бутстрап. В идеале конечно, только первый таб кликабелный и перемещаться по табу можно кнопкой чуть ниже(её пока нет в вёрстке)