当链接的 Href 是当前页面时隐藏链接 - 仅限 CSS

Question

在<ul/>中，如果<li/>的href是当前页面，我需要隐藏其中一个<li/>s。 我在SO上发现了几个帖子，但它们对我没有帮助。 类 =hideMeWhenActive的项目在其href处于活动状态时需要隐藏。 没有javascript，只有CSS。 可能吗？ 如果是这样，如何？

<ul class="primaryNav">
<li><a href="/Coverage/CoverageSummary/" class="primaryNav__link">Coverage</a></li>
<li><a href="/Claim/ClaimList/" class="primaryNav__link">Claims</a></li>
<li><a href="/HelpCenter/Main" class="primaryNav__link">Help</a></li>
<li><a href="~/IdCard/" class="btn hideMeWhenActive">Card</a></li> /*THIS ONE NEEDS TO BE HIDDEN*/
</ul>

Answer 1

如果我理解你的问题，请检查此代码，如果对您有用。

$( document ).ready(function() {
$( ".primaryNav_link" ).click(function(){
$(".hideMeWhenActive").addClass("showMeWhenActive").removeClass("hideMeWhenActive");
$(this).parent().addClass("hideMeWhenActive").removeClass("showMeWhenActive");
});
});

ul {
list-style: none;
margin-left: 0;
padding-left: 1em;
text-indent: -1em;
}
.hideMeWhenActive {
display: none;
}
.showMeWhenActive {
display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="primaryNav">
<li>- <a href="#" class="primaryNav_link">Coverage</a></li>
<li>- <a href="#" class="primaryNav_link">Claims</a></li>
<li>- <a href="#" class="primaryNav_link">Help</a></li>
<li class="hideMeWhenActive">- <a href="#" class="primaryNav_link">Card</a></li> <!--THIS ONE NEEDS TO BE HIDDEN-->
</ul>

它只是隐藏活动链接。

编辑 #1(仅限 CSS(：

ul {
list-style: none;
margin-left: 0;
padding-left: 1em;
text-indent: -1em;
}
.primaryNav_link {
display: block;
}
.primaryNav_link:focus {
display: none;
}

<ul class="primaryNav">
<li><a href="#" class="primaryNav_link">Coverage</a></li>
<li><a href="#" class="primaryNav_link">Claims</a></li>
<li><a href="#" class="primaryNav_link">Help</a></li>
<li><a href="#" class="primaryNav_link">Card</a></li>
</ul>

Answer 2

可悲的是，我认为使用纯粹的 CSS 无法实现这一点。

你绝对可以创建一个带有display: none属性的CSS类，但是要触发仅在单击该按钮时才将该类添加到li元素上，您需要添加一些JavaScript/jQuery。