0

Using OC v1.5.6.4 I wish to keep css state for header menu as Clicked after clicked

I have this going as menu:

<div id="m">
  <ul>
  <li><a href="#">Contact Us</a></li>
  <li><a href="#">Store</a>
        <div>
            <ul>
               <li><a href="#">Man</a></li>
               <li><a href="#">Woman</a></li>
               <li><a href="#">Accessories</a></li>
            </ul>
          </div>
   </li>
  </ul>
</div>

With css so:

#m > ul > li > a {
    text-decoration: none;
}
#m > ul > li:hover > a {
    color:#000 !important;
}
#m > ul >  li > a.clicked {
    color: #823428;
    border-bottom: #823428 2px solid !important;;
}
#m > ul > li > div > ul > li > a {
    text-decoration: none;
}

I have jQuery script:

$(document).ready(function() {
$("a").click(function(e) {
    $("a", $("#menu")).each(function () {
        if( $(this).hasClass("clicked") )
            $(this).removeClass("clicked");
    });

    $(this).addClass("clicked");
    });
});

When link is clicked before releasing mouse button it does turn to a.selected But after mouse click released it does not save class state.

What am I doing wrong?? Is it the page reloading?? Example:

Working example - not working

jsfiddle - working great

Jadeye
  • 3,551
  • 4
  • 47
  • 63
  • Thank you all...this led me to the solution with jQuery: Solution can be seeing here: http://jsfiddle.net/jadeye26/HDcqr/33/ $("a").click(function(e) { $("#m > ul > li > a").each(function () { if( $(this).hasClass("clicked") ) $(this).removeClass("clicked"); }); $(this).addClass('clicked'); }); – Jadeye May 13 '14 at 11:19

2 Answers2

0

nothing. that's exactly what a:active does

The :active selector is used to select and style the active link.

A link becomes active when you click on it.

http://www.w3schools.com/cssref/sel_active.asp

valerio0999
  • 11,458
  • 7
  • 28
  • 56
  • 2
    I'd suggest avoiding links to w3schools which contains lots of outdated an inaccurate information... – T J May 13 '14 at 10:14
  • 1
    It is common knowledge. W3Schools is awful. A few years ago I picked a page at random from it and found that half the paragraphs there contained misleading information and the other half contained something that was outright wrong. – Quentin May 13 '14 at 10:16
  • 1
    Take the bit you quoted, for example. It fails to mention that `:active` doesn't apply only to links, it doesn't mention the condition for the link to no longer be active, and it doesn't mention that the active state can be triggered with the keyboard. – Quentin May 13 '14 at 10:19
  • 1
    This is the official ref: http://www.w3.org/TR/CSS2/selector.html#dynamic-pseudo-classes "*The :active pseudo-class applies while an element is being activated by the user. For example, between the times the user presses the mouse button and releases it.*" – Abhitalks May 13 '14 at 10:19
0

The :active state will not remain after clicking.

If you want the link to remain the same color as the :active state, or become a different color, you'll want to use the :visited state.

#m > ul >  li > a:visited {
    color: #823428;
}
morganjlopes
  • 925
  • 7
  • 10