CSS HTML Javascript

クラスの付け替え

activeクラスを追加する前に、元からついていたactiveクラスは外すことで、移動するようにします。

  • activeクラスの付け替え

activeクラスの付け替え

・前回まででクリックをするとactiveクラスをつけて行くようにJavaScriptで指定していきました。

 

・ただこのままだとクラスを追加し続けるだけで前の要素にもついたまま次の要素にactiveクラスを付ける形になっています。

・なので今回はクリックされたらまずactiveクラスを外して、その後でクリックされたところのactiveクラスを付けるように指定していきます。

・やり方は簡単でremoveを使ってまずactiveを外してその後でaddで付けるという順番にしてあげればいいのです。

・つまりactiveクラスを付ける処理の前のmenuItemsからactiveクラスを外していきます。

・addする直前でforEachを使ってそれぞれの要素をitemとして受け取ってそのitemにclassListでremove('active’);と処理をし外してあげましょう。

・こんな感じですね。

      menuItems.forEach(item => {

        item.classList.remove('active');

      });

・今この状態だとクリックされて時のitemとリムーブするときに使うitemの2つが存在してわかりにくいので名前を変更していきましょう。

・今回は最初に設定したほうをclickedItemと変更していきたいと思います。

・やり方は要素をダブルクリックするとひとつの要素が選択されるのでmacOSの場合はoptionを押しながら他のタブをクリックすると一括で編集が可能になります。

・選択したらclickedItemにしておきましょう。

・このやり方は便利なので覚えておくといいでしょう。

-CSS, HTML, Javascript