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

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

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

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

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

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