Question

在<ul/>中，如果<li/>s的{{1}}是当前页面，则需要隐藏<li/>中的一个。我在href上找到了几则帖子，但是它们对我没有帮助。 SO处于活动状态时，需要隐藏类= hideMeWhenActive 的项目。没有href，只有javascript。可能吗？如果可以，怎么办？

CSS

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不可能做到这一点。

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

当Href为当前页面时隐藏链接-仅CSS

2 个答案: