使用Vanilla JS切换多个HTML文本元素可以通过以下步骤实现:
以下是一个示例代码:
HTML文件:
<div id="text1">文本1</div>
<div id="text2">文本2</div>
<div id="text3">文本3</div>
<button onclick="toggleText()">切换文本</button>
JavaScript文件:
function toggleText() {
var text1 = document.getElementById("text1");
var text2 = document.getElementById("text2");
var text3 = document.getElementById("text3");
if (text1.innerHTML === "文本1") {
text1.innerHTML = "新文本1";
text2.innerHTML = "新文本2";
text3.innerHTML = "新文本3";
} else {
text1.innerHTML = "文本1";
text2.innerHTML = "文本2";
text3.innerHTML = "文本3";
}
}
这个示例代码中,我们通过点击按钮来切换文本元素的内容。初始状态下,文本元素显示为"文本1"、"文本2"和"文本3"。当点击按钮时,文本元素的内容会切换为"新文本1"、"新文本2"和"新文本3"。再次点击按钮,文本内容会切换回原始状态。
请注意,这只是一个简单的示例,你可以根据实际需求和具体情况进行修改和扩展。
领取专属 10元无门槛券
手把手带您无忧上云