Javascript 聚焦中的imageMap链接

上下文- 我有一张影像地图。地图链接已设置为百分比，以便链接容器与图像一起响应。当用户将鼠标悬停在地图上时，会高亮显示不同的链接容器。当点击一个链接时，我会在地图下面显示一组信息

我的问题- 当显示一个DIV内容时，和/或用户单击地图链接时，我希望突出显示以及相应的DIV内容可见，即“.imageMapWiki a:hover”的框样式呈现。相反，我希望隐藏其他内容div和地图链接

如果有帮助，请提供其他信息-

• 我可以访问CMS来编辑我的内容。我是一个页面的作者，而不是网站的管理员，因此我没有访问源代码/模板的权限
• 我正在使用CMS的文本编辑器向特定页面添加功能，这是一个CKEditor，我可以通过单击“源代码”向该字段添加代码
• 该框架是自举的

我的代码-

<script type="text/javascript">
const toogleLinks = document.querySelectorAll('[data-toggle]');

// Loop through all links
Array.from(toogleLinks).forEach(link => {
        // get tooble elements
        const elementsSelector = link.getAttribute('data-toggle')
        const elements = document.querySelectorAll(elementsSelector);
    // add click event
        link.addEventListener('click', function(event) {
        // Hide all blocks
        Array.from(elements).forEach(item => item.setAttribute('hidden', true));
        // Get target block
        const target = this.getAttribute('href');
        // Show target block
        document.querySelector(target).removeAttribute('hidden')
    }, false);
});
</script>

<style>
.imageMapWiki {position: relative; overflow-x: hidden; }
.imageMapWiki a {display: block; position: absolute; text-decoration: none; }
.imageMapWiki a:hover {background-color: rgba(0, 105, 163, 0.4); border-radius: 10px; text-decoration: none; transition: opacity 0.5s cubic-bezier(0.36, 0.89, 1, 1);  opacity: 0.5;  }
</style>

<div class="imageMapWiki">
<img src="image.png" style="width: 100%; height: auto;" />
<a href="#phase1-box1" style="top: 2%; left: 0%; width: 12.2%; height: 88%;" data-toggle=".phase-boxes">&nbsp;</a>
<a href="#phase1-box2" style="top: 2%; left: 14%; width: 12.2%; height: 88%;" data-toggle=".phase-boxes">&nbsp;</a>
<a href="#phase1-box3" style="top: 2%; left: 28%; width: 12.2%; height: 88%;" data-toggle=".phase-boxes">&nbsp;</a>
</div>

<div class="phase-boxes" id="phase1-box1">
    <h3>Content box One</h3>
</div>
<div class="phase-boxes" id="phase1-box2" hidden>
    <h3>Content box Two</h3>
</div>
<div class="phase-boxes" id="phase1-box3" hidden>
    <h3>Content box Three</h3>
</div>

const toogleLinks=document.querySelectorAll（“[data toggle]”）；
//循环通过所有链接
Array.from（toogleLinks）.forEach（link=>{
//获取可访问元素
const elementsSelector=link.getAttribute（'data-toggle'）
const elements=document.queryselectoral（elementsSelector）；
//添加单击事件
link.addEventListener（'click'，函数（事件）{
//隐藏所有块
from（elements）.forEach（item=>item.setAttribute（'hidden'，true））；
//获得目标块
const target=this.getAttribute（'href'）；
//显示目标块
document.querySelector（target.removeAttribute（'hidden'））
}，假）；
});
.imageMapWiki{position:relative；overflow-x:hidden；}
.imageMapWiki a{显示：块；位置：绝对；文本装饰：无；}
.imageMapWiki a:悬停{背景颜色：rgba（0,105,163,0.4）；边框半径：10px；文本装饰：无；过渡：不透明度0.5s立方贝塞尔（0.36,0.89,1,1）；不透明度：0.5；}
内容框1
内容框二
内容框三

---

我的感谢

我找到了一个有效的解决方案，将tabindex添加到