tabs

おはようございます。

昨日からDMM英会話をはじめて、寝起きの脳に刺激をぶちこみまくってますどうもハヤトワンです。

強制的にシャキっとするために女性の講師を選んでますが、ほんまにシャキっとなりました。

ということでいつものこれ。

https://github.com/HayatoMoromasa/sample/tree/main/tabs

        let iconBx = document.querySelectorAll('.iconBx');
        let contentBx = document.querySelectorAll('.contentBx');

        for(let i=0; i < iconBx.length; i++){
            iconBx[i].addEventListener('mouseover', function(){
                for(let i=0; i<contentBx.length; i++){
                    contentBx[i].className = 'contentBx'
                }
                document.getElementById(this.dataset.id).className = 'contentBx active'
                for(let i = 0; i < iconBx.length; i++) {
                    iconBx[i].className = 'iconBx';
                }
                this.className = 'iconBx active';
            })
        }

ラーメンの画像にカーソル当てると、詳細が右側に出てくる仕様です。

for文の中でdata属性を指定してactiveがつくようにしております。

さ、これから英会話、緊張してますが、なれるまで頑張ろうと思います。

それでは今日も良い一日を。