In a <ul/>
I need to hide one of the <li/>s
if the <li/>
's href
is the current page. I found a couple of postings on SO
, but they're not helpful to me. The item with class = hideMeWhenActive needs to be hidden when its href
is active. No javascript
, just CSS
. Is it possible? If so, how?
<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>
Check this code, if can be useful for you, if I understood your question.
$( 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>
it just hides the active link.
Edit #1 (only 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>
Sadly, I don't think this is attainable by using purely CSS.
You can definitely make a CSS class with a display: none
attribute, but to trigger that class to be added on the li
element only when that button is clicked, you will need to add some JavaScript/jQuery.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.