具有不同id的Html链接(A)为其自己的容器div触发相同的函数,可以通过以下步骤实现:
<a id="link1" href="#">Link 1</a>
<a id="link2" href="#">Link 2</a>
<a id="link3" href="#">Link 3</a>
function handleClick(event) {
var linkId = event.target.id; // 获取点击链接的id
var div = document.getElementById(linkId); // 获取对应的容器div
// 执行相同的操作,例如显示/隐藏容器div
div.style.display = "block";
}
// 为每个链接添加点击事件处理程序
document.getElementById("link1").addEventListener("click", handleClick);
document.getElementById("link2").addEventListener("click", handleClick);
document.getElementById("link3").addEventListener("click", handleClick);
在上述代码中,我们通过addEventListener方法为每个链接添加了相同的点击事件处理程序handleClick。当点击链接时,handleClick函数将被调用,并通过event参数获取点击链接的id。然后,我们可以使用该id获取对应的容器div,并执行相同的操作。
这种方法适用于需要为多个链接实现相同功能的场景,例如展开/折叠内容、切换显示不同的页面等。
腾讯云相关产品和产品介绍链接地址:
领取专属 10元无门槛券
手把手带您无忧上云