サムネイルのクリックによる画像の切り替え

<div class= "menu">
   <div>
　　　<!-- メイン画像 -->
     <img src="img1.jpg" id="bigimg">
   </div>
   <ul>
     <!-- サムネイル画像 -->
     <li><img src="img1.jpg" class="thumb" data-image="img1.jpg"></li>
     <li><img src="img2.jpg" class="thumb" data-image="img2.jpg"></li>
     <li><img src="img3.jpg" class="thumb" data-image="img3.jpg"></li>
     <li><img src="img4.jpg" class="thumb" data-image="img4.jpg"></li>
   </ul>
</div>

  // 変数thumbsにquerySelectorAllで取得したサムネイル画像を代入
  const thumbs = document.querySelectorAll(".thumb");
  // forEachメソッドで要素を分ける
  thumbs.forEach(function(item, index){
    // 画像がクリックされた時にイベントが発生する
    item.onclick = function(){
      // クリックされた画像のカスタムデータ属性を読み取り、id="bigimg"のsrcに代入
      document.getElementById("bigimg").src = this.dataset.image;
    }
  });