<!-- タブメニュー -->
    <section class="tab">
        <ul class="tab__menu">
            <li class="tab__menu-item js-tab tab__active" data-id="test01">タブ1</li>
            <li class="tab__menu-item js-tab" data-id="test02">タブ2</li>
            <li class="tab__menu-item js-tab" data-id="test03">タブ3</li>
        </ul>
        <ul class="tab__content">
            <li class="tab__content-item js-content tab__active" id="test01"><img src="img/test01.webp" alt=""></li>
            <li class="tab__content-item js-content" id="test02"><img src="img/test02.webp" alt=""></li>
            <li class="tab__content-item js-content" id="test03"><img src="img/test03.webp" alt=""></li>
        </ul>
    </section>

/* タブメニュー */
.tab {
    width: 700px;
    margin: 0 auto;
    padding: 100px 0;
}

.tab__menu {
    display: flex;
    justify-content: center;
}

.tab__menu-item {
    width: 150px;
    text-align: center;
    padding: 15px 0;
    border-radius: 10px 10px 0 0;
}

.tab__menu-item + .tab__menu-item {
    margin: 0 0 0 -1px;
}

.tab__menu-item-link {
    display: block;
}

.tab__content {
    width: 700px;
    height: 400px;
}

.tab__content-item {
    display: none;
    width: 100%;
    height: 100%;
    padding: 10px 10px;
}

.tab__menu-item:not(.tab__active):hover {
    opacity: 0.5;
    transition: opacity 0.4s;
}

.tab__active {
    display: block;
    background: #333;
    color: #fff;
}
.test00 {
    margin-top: 1000px;
}
.test01 {
    width: 500px;
    height: 500px;
    background: gray;
}

    const tab = document.querySelectorAll('.js-tab');
    const tabContent = document.querySelectorAll('.js-content');
    tab.forEach(clicked => {
        clicked.addEventListener('click',() => {
            tab.forEach(item => {
                item.classList.remove('tab__active')
            });
            clicked.classList.add('tab__active')
            tabContent.forEach(item => {
                item.classList.remove('tab__active')
            })
            document.getElementById(clicked.dataset.id).classList.add('tab__active')
        })
    })

// document.querySelectorAllを使用して.js-tabと.js-contentのクラスがついている全ての要素を取得します。 
// document.querySelectorだと複数要素があったとしても最初の要素しか取得できないので注意して下さい。
const tab = document.querySelectorAll('.js-tab');
const tabContent = document.querySelectorAll('.js-content');
    
// forEachを使用してdocument.querySelectorAllで取得した全ての要素を繰り返し処理を行います。
tab.forEach(clicked => {

   // clickedという引数（一つ一つの要素）に対してclickイベントを付与
    clicked.addEventListener('click',() => {

        tab.forEach(item => {
            // tabで取得した全ての要素に対してtab__activeというクラスを削除
            item.classList.remove('tab__active')
        });

        // クリックされた要素に対してtab__activeを付与
        clicked.classList.add('tab__active')

        // tabContentで取得した全ての要素に対して繰り返し処理
        tabContent.forEach(item => {
            // クリックされた要素に対してtab__activeを付与    
            item.classList.remove('tab__active')
        })
    })
})