点击按钮隐藏显示div内容，切换div内容代码

好的，以下是实现点击按钮隐藏和显示div内容，以及切换div内容的代码：

HTML代码：

<div id="content1" class="content">这是内容1</div>
<div id="content2" class="content" style="display:none;">这是内容2</div>
<div id="content3" class="content" style="display:none;">这是内容3</div>

<button id="btn1" onclick="toggleContent(1)">显示内容1</button>
<button id="btn2" onclick="toggleContent(2)">显示内容2</button>
<button id="btn3" onclick="toggleContent(3)">显示内容3</button>

CSS代码：

.content {
  padding: 10px;
  border: 1px solid #ccc;
  margin-bottom: 10px;
}

JavaScript代码：

function toggleContent(contentNum) {
  // 隐藏所有内容
  var contents = document.querySelectorAll('.content');
  for (var i = 0; i < contents.length; i++) {
    contents[i].style.display = 'none';
  }

  // 显示指定的内容
  var targetContent = document.querySelector('#content' + contentNum);
  targetContent.style.display = 'block';
}

这个代码的实现思路是，当用户点击按钮时，调用toggleContent函数。该函数首先隐藏所有的内容，然后根据传入的参数contentNum，显示对应的内容。其中，使用querySelectorAll函数和循环来隐藏所有的内容，使用querySelector函数来获取指定的内容，并将其display属性设置为'block'来显示出来。

注意，这里使用了inline的方式在HTML中指定了默认显示和隐藏的样式，但实际开发中最好将样式放到CSS中，以便维护。