[英]Angular 6, a tag with href using #link links to base page not the current page
[英]Hide Link When its Href is the Current Page - CSS Only
在<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>
如果我理解您的問題,請檢查此代碼,如果對您有用。
$( 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>
可悲的是,我認為這無法通過使用純 CSS 來實現。
您絕對可以創建一個帶有display: none
屬性的 CSS 類,但是要僅在單擊該按鈕時觸發該類添加到li
元素上,您需要添加一些 JavaScript/jQuery。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.