Не работают табы, в чем причина?

Question

[G D]

const services_list_item = document.querySelectorAll('.services_list_item')
const section_foto_text = document.querySelectorAll('.section_foto_text') 

services_list_item.forEach(function(element){         
    element.addEventListener('click', function(){    

        const servicesAttribute = element.getAttribute('data-title')    

        services_list_item.forEach(function(element){   
            element.classList.remove('active')        
        })

        section_foto_text.forEach(function(item){  
            item.setAttribute('hidden', 'true')    
        
            const sectionAttribute = element.getAttribute('data-content')  

            if(servicesAttribute === sectionAttribute){  
                element.classList.add('active')     
                item.removeAttribute('hidden') 
            }
        })
    })
})

<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" 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</p>
        </div>
        <div class="section_foto_text" data-content = "Graphic Design" hidden>
            <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.</p>
        </div>

Comments

[Froggyweb]

а браузер в девтулзах что говорит?

Answer 1

[0xD34F]

Вместо контента получаете атрибут у заголовка:

const sectionAttribute = element.getAttribute('data-content')

Замените element на item.

А вообще, код можно и сократить:

const titles = document.querySelectorAll('[data-title]');
const contents = document.querySelectorAll('[data-content]');

titles.forEach(n => n.addEventListener('click', onClick));

function onClick({ currentTarget: t }) {
  titles.forEach(n => n.classList.toggle('active', n === t));
  contents.forEach(n => n.hidden = n.dataset.content !== t.dataset.title);
}

Comments

[G D]

Спасибо огромное, работает

[G D]

0xD34F, спасибо