Home>
const section_foto_text= function(){
    const services_list_item= document.querySelectorAll('.services_list_item')
    const section_foto_text= document.querySelectorAll('.section_foto_text')
    services_list_item.forEach(item=> {
        item.addEventListener('click', selectTab)
    })
    function selectTab(){
        services_list_item.forEach(item=> {
            item.classList.remove('active')
        })
        this.classList.add('active')
        tabName= this.getAttribute('data-title')
        selectTabContent(tabName)
    }
    function selectTabContent(tabName) {
        section_foto_text.forEach(elem=> {
            elem.classList.contains(tabName) ? elem.classList.add('active') : elem.classList.remove('active')
        })
    }
}
section_photo_text()
<section class="services container">        <h1 class="services-title">Our Services</h1>            <ul class="services-list">                <li class="services_list_item active" data-title="Web Design">Web Design</li>                <li class="services_list_item" data-title="Graphic Design">Graphic Design</li>                <li class="services_list_item" data-title="Online Support">Online Support</li>                <li class="services_list_item" data-title="App Design">App Design</li>                <li class="services_list_item" data-title="Online Marketing">Online Marketing</li>                <li class="services_list_item" data-title="Seo Service">Seo Service</li>            </ul>        <div class="section_foto_text active" data-content= "Web Design">            <img class="section-foto" src="./images/web-design.png" alt="foto-section">            <p class="section-text" >Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti eveniet, corporis officia eum ducimus asperiores similique ratione quasi vel, inventore id aliquam quam, modi quis? Consequuntur laboriosam ea nobis blanditiis. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolorem autem, rem eaque facere architecto repudiandae laborum fuga vero, voluptas eum in quia error cumque officia magni ducimus sint dicta minus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit debitis iure laborum aspernatur error! Nulla doloribus at nobis ab animi voluptatibus aperiam, dolores cupiditate dolor sunt, quos sequi, incidunt alias. Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora eos, dolore nulla natus temporibus voluptates hic sed, sequi doloribus ducimus iure ullam, fugiat vitae quam ipsam! Porro non magnam quo? lo

</div> <div class="section_foto_text" data-content= "Graphic Design"> <img class="section-foto" src="./images/graphic.png" alt="foto-section"> <p class="section-text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Officiis, perspiciatis minus ex dolor esse tempora molestias sint voluptatibus ea quas laudantium iste expedita corrupti libero. Neque atque vel ducimus perspiciatis. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt facere nisi quis asperiores ab deleniti quod minima id adipisci ad, nobis pariatur rerum voluptate voluptates culpa amet itaque? Natus, ab! Lorem ipsum dolor sit amet consectetur, adipisicing elit. Consequuntur harum nam similique magnam, veritatis, esse necessitatibus doloribus, magni nobis at autem porro cum ipsum optio a laudantium nemo maxime aliquam! Lorem ipsum dolor sit amet, consectetur adipisicing elit. A culpa vel exercitationem, voluptas sapiente corrupti quibusdam totam soluta ullam error ea autem asperiores. Eveniet voluptatum nobis deleniti quasi cum! Possimus

</div></section>.section_foto_text { display: none; align-items: center; } .section_foto_text.active { display:flex; }

Well, you have there inside selectTabContent such elem.classList.contains(tabName) and this is how you determine which tab to hang the active class on, but you pass this.getAttribute('data-title') as tabName which in turn matches with data-content on tab. What does classList have to do with it?

Simon2022-01-14 13:40:03

I don't quite understand what I need to do

Galina2022-01-14 13:56:16