一个按钮点击触发后变为另一个按钮 再次点击可以变回第一个按钮
时间: 2023-09-08 15:10:21 浏览: 48
可以使用JavaScript来实现这个功能。首先,需要在HTML中定义两个按钮元素,一个用于显示第一个按钮,一个用于显示第二个按钮。
```html
<button id="button1" onclick="toggleButton()">Button 1</button>
<button id="button2" style="display:none" onclick="toggleButton()">Button 2</button>
```
然后,使用JavaScript来实现toggleButton()函数,该函数将根据当前按钮的状态切换按钮的可见性和文本。
```javascript
function toggleButton() {
var button1 = document.getElementById("button1");
var button2 = document.getElementById("button2");
if (button1.style.display === "none") {
button1.style.display = "block";
button2.style.display = "none";
button1.innerHTML = "Button 1";
} else {
button1.style.display = "none";
button2.style.display = "block";
button2.innerHTML = "Button 2";
}
}
```
当用户点击按钮时,toggleButton()函数将被调用。如果第一个按钮当前不可见,则将其设置为可见,并将第二个按钮设置为不可见。同时,将第一个按钮的文本设置为“Button 1”。反之,如果第一个按钮当前可见,则将其设置为不可见,并将第二个按钮设置为可见。同时,将第二个按钮的文本设置为“Button 2”。
这样,每次用户点击按钮时,按钮的可见性和文本都会切换,从而实现了题目所描述的功能。