js中div盒子有四个小div盒子，点击第一个小盒子，则显示这个小盒子，其余不显示

可以使用 JavaScript 来实现这个功能。首先，需要对四个小盒子添加点击事件监听器，当用户点击其中一个小盒子时，就将该小盒子显示，同时将其它三个小盒子隐藏。可以使用以下代码来实现：

<div id="myDiv">
  <div class="box active"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

const boxes = document.querySelectorAll('.box');

boxes.forEach(function(box) {
  box.addEventListener('click', function() {
    // 隐藏所有小盒子
    boxes.forEach(function(box) {
      box.classList.remove('active');
    });
    
    // 显示当前点击的小盒子
    this.classList.add('active');
  });
});

在上面的代码中，首先获取了四个类名为 `box` 的小盒子元素，并使用 `forEach` 方法来遍历它们并为每个小盒子元素添加了一个 `click` 事件监听器。当用户点击其中一个小盒子时，就会触发该事件监听器中的回调函数，你可以在该回调函数中编写处理点击事件的逻辑。在这个例子中，我们首先使用 `forEach` 方法遍历所有小盒子元素，并将它们的 `active` 类名移除，从而隐藏它们。然后，使用 `this` 关键字引用当前被点击的小盒子元素，并为它添加 `active` 类名，从而将它显示出来。最终，只有被点击的小盒子元素会显示出来，其它三个小盒子元素都被隐藏了。