按钮控制div交替显示

按钮控制div交替显示的实现可以通过JavaScript和CSS来完成。我们需要为按钮和要显示/隐藏的div元素添加对应的id属性，以便在JavaScript中进行操作。

示例代码如下：

HTML代码：

<button id="toggleButton">点击切换显示</button>
<div id="contentDiv">这是要显示/隐藏的内容</div>

接下来，我们需要使用JavaScript来监听按钮的点击事件，并在点击时切换div的显示/隐藏状态。为此，我们可以使用addEventListener方法为按钮添加一个click事件监听器。在监听器中，我们可以使用getElementById方法获取到要操作的按钮和div元素，并通过style.display属性来控制其显示/隐藏状态。

示例代码如下：

JavaScript代码：

document.getElementById("toggleButton").addEventListener("click", function() {
  var contentDiv = document.getElementById("contentDiv");
  if (contentDiv.style.display === "none") {
    contentDiv.style.display = "block";
  } else {
    contentDiv.style.display = "none";
  }
});

在上述代码中，我们首先获取到按钮和div元素，并将其分别赋值给变量toggleButton和contentDiv。然后，在按钮的click事件监听器中，我们通过判断contentDiv的display属性是否为"none"来确定当前div是否处于隐藏状态。如果是隐藏状态，则将其display属性设置为"block"，使其显示出来；如果是显示状态，则将其display属性设置为"none"，使其隐藏起来。

我们还可以使用CSS中的transition属性来实现平滑的显示/隐藏效果。通过为contentDiv添加transition属性，我们可以指定div的显示/隐藏过渡效果的持续时间、类型等。

示例代码如下：

CSS代码：

#contentDiv {
  transition: all 0.5s ease;
}

在上述代码中，我们为contentDiv添加了transition属性，并指定了过渡效果的持续时间为0.5秒，过渡类型为"ease"，即缓动效果。这样，在切换div的显示/隐藏状态时，就会有一个平滑的过渡效果。

我们可以通过JavaScript和CSS来实现按钮控制div交替显示的效果。通过JavaScript监听按钮的点击事件，并通过控制div的display属性来实现显示/隐藏的切换；通过CSS的transition属性，可以为div添加平滑的过渡效果。这种交互效果在实际的网页开发中经常被使用，可以提升用户体验并增加页面的交互性。