按钮点击切换div网页

按钮点击切换div网页是一种常见的网页交互效果，通过点击按钮可以实现在同一个页面中切换显示不同的内容。实现这一效果的方法有很多，下面我将介绍一种常见的实现方式。

我们需要在HTML中定义按钮和要切换的div元素。按钮可以使用<button>标签，而要切换的div元素可以使用<div>标签。为了方便操作，我们可以给按钮和div元素添加id属性，以便在JavaScript中进行操作。

<button id="btn1">按钮1</button>
<button id="btn2">按钮2</button>
<div id="div1">内容1</div>
<div id="div2">内容2</div>

接下来，我们需要使用JavaScript来实现按钮点击切换div的功能。我们可以使用document.getElementById()方法获取按钮和div元素的引用，然后可以通过设置元素的display属性来控制元素的显示与隐藏。

var btn1 = document.getElementById("btn1");
var btn2 = document.getElementById("btn2");
var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
btn1.onclick = function() {
  div1.style.display = "block";
  div2.style.display = "none";
};
btn2.onclick = function() {
  div1.style.display = "none";
  div2.style.display = "block";
};

在上面的示例代码中，我们通过为按钮的onclick事件绑定函数来实现按钮点击时切换div的显示与隐藏。当点击按钮1时，div1显示，div2隐藏；当点击按钮2时，div1隐藏，div2显示。

除了使用display属性来控制元素的显示与隐藏，我们还可以使用visibility属性或者opacity属性来实现类似的效果。这些属性的具体用法和区别可以根据实际需求进行选择。

总结一下，通过添加按钮和div元素，并使用JavaScript来控制元素的显示与隐藏，我们可以实现按钮点击切换div网页的效果。这种方法简单易懂，适用于一些简单的网页交互效果。对于更复杂的交互效果，我们可以借助一些前端框架或者库来实现，如jQuery、Vue.js等。