js 按钮滑动切换-代码示例

JavaScript中可以使用事件监听和CSS样式操作来实现按钮滑动切换效果。我们需要为按钮添加一个点击事件监听器，当按钮被点击时触发相应的事件处理函数。在事件处理函数中，我们可以使用CSS样式操作来改变按钮的位置，从而实现滑动切换的效果。

示例代码如下：

HTML部分：

<button id="button1">按钮1</button>
<button id="button2">按钮2</button>

JavaScript部分：

var button1 = document.getElementById("button1");
var button2 = document.getElementById("button2");
button1.addEventListener("click", function() {
  // 切换按钮1的样式
  button1.style.transform = "translateX(0)";
  button2.style.transform = "translateX(100%)";
});
button2.addEventListener("click", function() {
  // 切换按钮2的样式
  button1.style.transform = "translateX(-100%)";
  button2.style.transform = "translateX(0)";
});

在上面的示例代码中，我们首先通过`document.getElementById`方法获取到按钮元素，并将其分别赋值给`button1`和`button2`变量。然后，我们使用`addEventListener`方法为按钮添加了一个点击事件监听器，并在事件处理函数中使用`style.transform`来改变按钮的`transform`属性，实现按钮的滑动切换效果。

当按钮1被点击时，我们将按钮1的`transform`属性设置为`translateX(0)`，将按钮2的`transform`属性设置为`translateX(100%)`，从而使按钮1显示在可见区域，按钮2滑出可见区域。

当按钮2被点击时，我们将按钮1的`transform`属性设置为`translateX(-100%)`，将按钮2的`transform`属性设置为`translateX(0)`，从而使按钮2显示在可见区域，按钮1滑出可见区域。

通过这种方式，我们可以实现按钮的滑动切换效果。