おはようございます。
昨日から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がつくようにしております。
さ、これから英会話、緊張してますが、なれるまで頑張ろうと思います。
それでは今日も良い一日を。