Как сделать, чтобы вкладки на сайте открывались по клику?

Question

[gleg0r]

Добрый день, учу Javascript, но пока что все плохо.
Верстаю сейчас сайт там нужно сделать вкладки, их я сделал, все скрывается, но при клике они не открываются.
Вот HTML

<div class="block-service-tabs" id="tabs">
                        <div class="block-service-tabs__tab">
                            <span class="material-icons">trending_up</span>
                            <p>Statistics</p>
                            <span class="material-icons" styles=>arrow_drop_down</span>
                            
                        </div>
                        <div class="block-service-tabs__tab-content">
                            <img src="../img/service.png">
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, <br/> <br/>quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in </p>
                        </div>
                        <div class="block-service-tabs__tab">
                            <span class="material-icons">mail</span>
                            <p>Inbox</p>
                            <span class="material-icons" styles=>arrow_drop_down</span>
                        </div>
                        <div class="block-service-tabs__tab-content">
                            <img src="../img/service.png">
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, <br/> <br/>quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in </p>
                        </div>
                        <div class="block-service-tabs__tab">
                            <span class="material-icons">group</span>
                            <p>Team</p>
                            <span class="material-icons" styles=>arrow_drop_down</span>
                        </div>
                        <div class="block-service-tabs__tab-content">
                            <img src="../img/service.png">
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, <br/> <br/>quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in </p>
                        </div>
                        <div class="block-service-tabs__tab">
                            <span class="material-icons">settings</span>
                            <p>Settings</p>
                            <span class="material-icons" styles=>arrow_drop_down</span>
                        </div>
                        <div class="block-service-tabs__tab-content">
                            <img src="../img/service.png">
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, <br/> <br/>quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in </p>
                        </div>
                        <div class="block-service-tabs__tab">
                            <span class="material-icons">rss_feed</span>
                            <p>Feed</p>
                            <span class="material-icons" styles=>arrow_drop_down</span>
                        </div>
                        <div class="block-service-tabs__tab-content">
                            <img src="../img/service.png">
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, <br/> <br/>quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in </p>
                        </div>
                    </div>

Вот JS

let tab; // заголовок вкладки
            let tabContent; // блок содержащий контент вкладки


            window.onload=function() {  // Скрываю при загрузке страницы
                tabContent=document.getElementsByClassName('block-service-tabs__tab-content');
                tab=document.getElementsByClassName('block-service-tabs__tab');
                hideTabsContent(1);
            }

            document.getElementById('block-service-tabs').onclick= function (event) { // Открываю по клику
                var target=event.target;
                if (target.className=='block-service-tabs__tab') {
                for (var i=0; i<tab.length; i++) {
                    if (target == tab[i]) {
                        showTabsContent(i);
                        break;
                        }
                    }
                }
            }

            function hideTabsContent(a) {                   // Функция, которая скрывает
                for (var i=a; i<tabContent.length; i++) {
                    tabContent[i].classList.remove('show');
                    tabContent[i].classList.add("hide");
                }
            }

            function showTabsContent(b){ // Функция, которая открывает
                if (tabContent[b].classList.contains('hide')) {
                    hideTabsContent(0);
                    tabContent[b].classList.remove('hide');
                    tabContent[b].classList.add('show');
                }
            }

Впервые пользуюсь хабром, не осуждайте плз
у hide: display: none
у show: display: flex

Answer 1

[WapSter]

Простейший пример

Comments

[gleg0r]

Привет, если не сложно, не мог бы ты объяснить стрелочную функцию в твоем решение?

[WapSter]

gleg0r, мне не нужен был контекст this, пишу с использованием вебпака и babel сделает все за меня основываясь на browserslist. Их удобнее и быстрее писать

[gleg0r]

WapSter, Прости, неправильно выразился

tabsBody.forEach(tabBody => {
                    tabBody.classList.remove('class-active')
                })

tabsBody является константой, в которую передается массив всех селекторов, после чего ты применяешь метод forEach и добавляешь элемент tabBody, являющийся элементом массива. Я правильно понял?

Для меня JS дается сложнее нежели другие языки

[WapSter]

gleg0r, ты не верно понимаешь. Если переменная создана при помощи const это не обязательно константа. Ну атак в основном все верно.

[gleg0r]

WapSter, хорошо, спасибо