Jump to content

How to apply active class for active link


newcoder1010
 Share

Recommended Posts

Hello,

HTML:

<div class="areas-box-list">
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 area-loc">
<a href="../denver-county" target="_self"><br><span class="glyphicon glyphicon-map-marker text-primary"></span><span class="text-primary">Denver County</span> </a></div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 area-loc">
<a href="../arapahoe-county" target="_self"><br><span class="glyphicon glyphicon-map-marker text-primary"></span><span class="text-primary">Arapahoe County</span> </a></div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 area-loc">
<a href="../douglas-county" target="_self"><br><span class="glyphicon glyphicon-map-marker text-primary"></span><span class="text-primary">Douglas County</span> </a></div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 area-loc">
<a href="../jefferson-county" target="_self"><br><span class="glyphicon glyphicon-map-marker text-primary"></span><span class="text-primary">Jefferson County</span> </a></div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 area-loc">
<a href="../adams-county" target="_self"><br><span class="glyphicon glyphicon-map-marker text-primary"></span><span class="text-primary">Adams County</span> </a></div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 area-loc">
<a href="../broomfield-county" target="_self"><br><span class="glyphicon glyphicon-map-marker text-primary"></span><span class="text-primary">Broomfield County</span> </a></div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 area-loc">
<a href="../boulder-county" target="_self"><br><span class="glyphicon glyphicon-map-marker text-primary"></span><span class="text-primary">Boulder County</span> </a></div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 area-loc">
<a href="../gilpin-county" target="_self"><br><span class="glyphicon glyphicon-map-marker text-primary"></span><span class="text-primary">Gilpin County </span> </a></div>
</div>

 

CSS:

.area-loc a:hover{
  background:#04437a; 
}

.area-loc a:active { color:white; background:#083a9a;;}

 

Hover works just fine. Active does not work. I noticed that I do not have active class in html. I am not sure how to add the active class in html. Please advise!

 

Link to comment
Share on other sites

:active has never worked as expected, less so when it was said it was a security risk in that it could be used to track where you have been.

You would have to look at current url in browser address bar, strip it down to last text after the last slash and then match it to the url in href, if identical add class 'active'.

This can be done either by server script such as PHP, or client script javascript/jquery.

Link to comment
Share on other sites

I'm not sure what you are referring to. The :active pseudo-class has always worked as designed. It applies a style to an object when the object is being interacted with, either by being clicked or having focus and the user pressing Enter.

You might be thinking of the :visited pseudo-class. Javascript does not have access to computed styles of visited links because that would allow anybody to track where you have been.

Link to comment
Share on other sites

No, the :active pseudo-class was never intended to do that. It is a mere coincidence that people ended up using the CSS ".active" class to represent a link that points to the current page.

From the original CSS 1 specification: https://www.w3.org/TR/CSS1/#anchor-pseudo-classes

Quote

An 'active' link is one that is currently being selected (e.g. by a mouse button press) by the reader.

 

Link to comment
Share on other sites

Yes! I know that! But! That is what anyone new to these pseudo classes, expect it to do, hence

5 hours ago, dsonesuk said:

:active has never worked as expected,

Hence

Quote

people expect it to highlight and remain highlighted to current page

It's not the easiest pseudo class to see or a activate, the chances are that if it exists, it's more than likely never noticed by the majority.

Edited by dsonesuk
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...