javascript - 如果我在 iframe 内单击，CSS a:focus “忘记”最后一个位置

Question

我的a:focusCSS 上的 运行良好，但前提是我不点击iframe页面的或其他位置。无论我点击哪里，如何避免a:focus损失最后一个位置？

只有 CSS 或简单的 JavaScript 才有可能？

当我在 SideNav 上导航时，它运行良好：

如果我点击页面的其他位置，SideNav 会丢失最后一个位置：

我的 CSS 和 HTML

ul.SideNav_Main li a {
    text-decoration: none;
    color: #2e849e;
    padding: 10px 20px;
    display: block;
}
 
ul.SideNav_Main li a:focus { background-color: #ffdb99;}

<li>

    <a href="#" onclick="Toggle_Visibility('T301');">Segurança</a>

    <ul class="SideNav_Sub" id="T301" style="display: block;">
        <li><a href="PasswordUpdate.php" target="_iframe">Change Password</a></li>    
        <li><a href="eKeyUpdate.php" target="_iframe">Change eKey</a></li>  
    </ul>
</li>
<li><a href="Logout.php" target="_parent">Logout</a></li>

标签： javascripthtmlcss

Answer 1

最简单的是使用 javascript（如果您有兴趣使用纯 css 解决问题，您可以查看无线电输入）。将“mySidebarLinks”类添加到您的链接
css：

  .myStyle{color: red;}

javascript:

  const links = document.getElementsByClassName("mySidebarLinks");

  for (var i = 0; i < links.length; i++) {
    links[i].addEventListener("click", (e) => {
        for (var j = 0; j < links.length; j++) {
            if (links[j]!=e.target){
                links[j].classList.remove('myStyle');
            }else links[j].classList.add('myStyle');
        }
    });
  }