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

Question

在<ul/>中，如果<li/>的href是当前页面，我需要隐藏<li/>s之一。 我在SO上找到了几个帖子，但它们对我没有帮助。 当其href处于活动状态时，需要隐藏 class = hideMeWhenActive的项目。 没有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。