多个相同的按钮,每个按钮点击后会获得各自下面的文字信息
时间: 2023-06-14 13:07:19 浏览: 26
你可以使用 HTML 和 JavaScript 来实现这个功能。首先,在 HTML 中创建多个按钮和对应的文字信息:
```html
<button onclick="showText(1)">按钮1</button>
<div id="text1" style="display:none">按钮1的文字信息</div>
<button onclick="showText(2)">按钮2</button>
<div id="text2" style="display:none">按钮2的文字信息</div>
<button onclick="showText(3)">按钮3</button>
<div id="text3" style="display:none">按钮3的文字信息</div>
```
接着,在 JavaScript 中定义一个函数 `showText`,该函数接收一个参数 `num`,表示点击的是第几个按钮。函数中先将所有的文字信息隐藏,然后显示对应的文字信息:
```javascript
function showText(num) {
// 隐藏所有文字信息
for (var i = 1; i <= 3; i++) {
document.getElementById("text" + i).style.display = "none";
}
// 显示对应的文字信息
document.getElementById("text" + num).style.display = "block";
}
```
这样,每次点击一个按钮时,就会显示该按钮下面的文字信息,同时隐藏其他按钮的文字信息。
相关推荐

















