lia:focus，当我点击iframe时防止焦点丢失

Question

当我点击页面中的iframe或其他位置时，如何防止我的ul.SideNav_Main li a:focus类失去焦点？难道不应该被认为是a:focus吗？在我点击列表的其他URL之前，它会一直保持焦点？

可以用纯CSS解决吗？或者使用一些JavaScript代码？

我的CSS：

ul.SideNav_Main {
font-weight: bold;
background-color: #ebf6f9;
list-style-type: none;
margin: 0;
padding: 0;
width: 15%;
height: 100%;
border-right: 1px solid #e6e6e6;
position: fixed;
overflow: auto;
}
ul.SideNav_Main li a {
text-decoration: none;
color: #2e849e;
padding: 10px 20px;
display: block;
}

ul.SideNav_Main li a:focus:not(.Active):not(.Logout) {
background-color: #ffdb99;
}
ul.SideNav_Main ul.SideNav_Sub {
font-size: 10px;
font-weight: normal;
width: 100%;
margin: 0;
padding: 0;
list-style-type: none;
overflow: auto;
}

我的HTML：

<ul class="SideNav_Main">
<li><a class="Active" href="yPage.php?ID=30000" target="_iframe">HOME</a></li>
<li>
<a href="#">RaspLot</a>
<ul class="SideNav_Sub" id="T101">
<li><a href="yPage.php?ID=10101" target="_iframe">Controlo Diário</a></li>
<li><a href="yPage.php?ID=10102" target="_iframe">Balanços</a></li>
<li><a href="yPage.php?ID=10103" target="_iframe">Consultar Artigos</a></li>
<li><a href="yPage.php?ID=10104" target="_iframe">Inserir Artigos</a></li>
</ul>
</li>
<li>
<a href="#">Segurança</a>
<ul class="SideNav_Sub" id="T301">
<li><a href="yPage.php?ID=30101" target="_iframe">Alterar Password</a></li>
<li><a href="yPage.php?ID=30102" target="_iframe">Alterar eKey</a></li>
</ul>
</li>
<li>
<a href="#">Master</a>
<ul class="SideNav_Sub" id="T398">
<li><a href="yPage.php?ID=39801" target="_iframe">Registry Access</a></li>
<li><a href="yPage.php?ID=39802" target="_iframe">Registry Alert</a></li>
<li><a href="yPage.php?ID=39803" target="_iframe">Explorer SSID</a></li>
<li><a href="yPage.php?ID=39899" target="_iframe">Print_r</a></li>
</ul>
</li>
<li><a class="Logout" href="yPage.php?ID=39900" target="_parent">Logout</a></li>
</ul>

当我点击得到focus

当我点击页面的其他位置时，它会丢失focus

Answer 1

:focus伪类用于通过单击或使用tab键对元素进行样式设置，只要它已获得焦点即可。一旦单击其他位置或使用tab键进行导航，先前聚焦的元素就会失去焦点。https://developer.mozilla.org/en-US/docs/Web/CSS/:focus

为了突出显示活动页面，给它一个css类(例如.current-page(，并给它一些额外的样式：

ul.SideNav_Main {
font-weight: bold;
background-color: #ebf6f9;
list-style-type: none;
margin: 0;
padding: 0;
width: 15%;
height: 100%;
border-right: 1px solid #e6e6e6;
position: fixed;
overflow: auto;
}
ul.SideNav_Main li a {
text-decoration: none;
color: #2e849e;
padding: 10px 20px;
display: block;
}

ul.SideNav_Main li a.current-page:not(.Active):not(.Logout) {
background-color: #ffdb99;
}
ul.SideNav_Main ul.SideNav_Sub {
font-size: 10px;
font-weight: normal;
width: 100%;
margin: 0;
padding: 0;
list-style-type: none;
overflow: auto;
}

<ul class="SideNav_Main">
<li><a class="Active" href="yPage.php?ID=30000" target="_iframe">HOME</a></li>
<li>
<a href="#">RaspLot</a>
<ul class="SideNav_Sub" id="T101">
<li><a href="yPage.php?ID=10101" target="_iframe">Controlo Diário</a></li>
<li><a href="yPage.php?ID=10102" target="_iframe" class="current-page">Balanços</a></li>
<li><a href="yPage.php?ID=10103" target="_iframe">Consultar Artigos</a></li>
<li><a href="yPage.php?ID=10104" target="_iframe">Inserir Artigos</a></li>
</ul>
</li>
<li>
<a href="#">Segurança</a>
<ul class="SideNav_Sub" id="T301">
<li><a href="yPage.php?ID=30101" target="_iframe">Alterar Password</a></li>
<li><a href="yPage.php?ID=30102" target="_iframe">Alterar eKey</a></li>
</ul>
</li>
<li>
<a href="#">Master</a>
<ul class="SideNav_Sub" id="T398">
<li><a href="yPage.php?ID=39801" target="_iframe">Registry Access</a></li>
<li><a href="yPage.php?ID=39802" target="_iframe">Registry Alert</a></li>
<li><a href="yPage.php?ID=39803" target="_iframe">Explorer SSID</a></li>
<li><a href="yPage.php?ID=39899" target="_iframe">Print_r</a></li>
</ul>
</li>
<li><a class="Logout" href="yPage.php?ID=39900" target="_parent">Logout</a></li>
</ul>