How to keep active css style after clicking an element

Question

I use anchor as my site navigation     lt div id  nav  gt   lt a href   abouts  gt   lt div class  navitem about  gt  about  lt  div gt   lt  a gt   lt a href   workss  gt   lt div class  navitem works  gt  works  lt  div gt   lt  a gt   lt  div gt    The CSS   nav   margin-left  50px  margin-top  50px  text-transform  uppercase     navitem   background   333  color  white  width  230px  height  50px  font-size  25px  line-height  50px  padding-left  20px  -webkit-user-select  none  -moz-user-select  none  user-select  none  margin-top  10px     about hover   background   cc00ff     about active   background   ff00ff  color   000  width  250px     works hover   background   0066FF     works active   background   0099cc  color   000  width  250px      I m wondering how to keep the div element style keep in the  active state once after the click until I  hit another nav bar item  so how to do it

User · Answer

You can use a little bit of Javascript to add and remove CSS classes of your navitems. For starters, create a CSS class that you're going to apply to the active element, name it ie: ".activeItem". Then, put a javascript function to each of your navigation buttons' onclick event which is going to add "activeItem" class to the one activated, and remove from the others...

It should look something like this: (untested!)

/*In your stylesheet*/
.activeItem{
   background-color:#999; /*make some difference for the active item here */
}


/*In your javascript*/
var prevItem = null;
function activateItem(t){
   if(prevItem != null){
      prevItem.className = prevItem.className.replace(/{\b}?activeItem/, "");
   }
   t.className += " activeItem";
   prevItem = t;
}

<!-- And then your markup -->
<div id='nav'>
<a href='#abouts' onClick="activateItem(this)">
<div class='navitem about'>
about
</div>
</a>
<a href='#workss' onClick="activateItem(this)">
<div class='navitem works'>
works
</div>
</a>
</div>

User · Answer

I FIGURED IT OUT  SIMPLE  EFFECTIVE NO jQUERY We re going to to be using a hidden checkbox  This example includes one  quot on click - off click  hover   active  state quot  -- To make content itself clickable   x000D   x000D   activate-div display none    my-div background-color  FFF    activate-div checked   label  my-div background-color  000  x000D   lt input type  checkbox  id  activate-div  gt   lt label for  activate-div  gt     lt div class  my-div  gt        MY DIV CONTENT    lt  div gt   lt  label gt  x000D   x000D   x000D   To make button change content   x000D   x000D   activate-div display none    my-div background-color  FFF    activate-div checked    my-div background-color  000  x000D   lt input type  checkbox  id  activate-div  gt   lt div class  my-div  gt      MY DIV CONTENT  lt  div gt    lt label for  activate-div  gt      MY BUTTON STUFF  lt  label gt  x000D   x000D   x000D   Hope it helps

User · Answer

Combine JS  amp  CSS    button       1st state       button hover       hover state       button active       click state       button active       after click state        jQuery  button   click function       jQuery this  toggleClass  active

User · Answer

The  target-pseudo selector is made for these type of situations  http   reference sitepoint com css pseudoclass-target  It is supported by all modern browsers  To get some IE versions to understand it you can use something like Selectivizr  Here is a tab example with  target-pseudo selector

User · Answer

If you want to keep your links to look like they are  active class  you should define  visited class same as  active so if you have a links in  example then you do something like this   a example active  a example visited      Put your active state style code here        The Link visited Pseudo Class is used to select visited links as says the name

[css] How to keep :active css style after clicking an element

Examples related to css

Examples related to hyperlink