Help: a:active does not work! ! _html/css_WEB-ITnose

I want to use the following css to achieve: after selecting a menu, stay on the a:active style.

The problem now is: when the mouse is pressed down, the style is there. Once released or moved away, it returns to the a:link style.



/*CSS style*/

#menu ul li {background: #eef; border-bottom: 1px solid #CCC; float:left;}
#menu ul li a { display:block; height: 38px; width:168px; line-height: 38px; float:left;}
#menu ul li a:link {background: #eef; color:#666 ;}
#menu ul li a:visited {background: #eef; color:#666;}
#menu ul li a:hover { background:#3ab3ec; font-size:14px; color:#fff ; font-weight:bold;}
#menu ul li a:active { background:#3ab3ec; font-size:14px; color:#fff; font-weight:bold;}

/* html code*/

6fe94dc97080d2a50cb38590b83c99e9
ff6d136ddc5fdfeffaf53ff6ee95f185
25edfb22a4f469ecb59f1190150159c6927622e3dbbfa7d0475d1bf828cd1738Required for installation Prepare5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb 
 

 c1874a12f6da57139425772858c97913Arcade Game5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c6ee7959cc8dd4be16ef633321c03dac32Adventure Game5db79b134e9f6b82c0b36e0489ee08ed2867e861ba23559b572f230426ab14ea
  25edfb22a4f469ecb59f1190150159c6ee7959cc8dd4be16ef633321c03dac32Strategy game5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
  25edfb22a4f469ecb59f1190150159c6ee7959cc8dd4be16ef633321c03dac32Intelligence Games5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
  25edfb22a4f469ecb59f1190150159c6a114f3cb7ee4ca6ade224c7497213c54Racing game5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c6ee7959cc8dd4be16ef633321c03dac32Chess and card game5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c6ee7959cc8dd4be16ef633321c03dac32Educational Games5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
929d1f5ca49e04fdcb27f9465b944689
16b28748ea4df4d9c2150843fecfba68

Reply to discussion (solution)

Because #menu ul li a:visited {background: #eef; color:#666;}, what really works after the mouse is moved is
a :visited

Yes, the author should take a closer look at the functions of several pseudo-class representations.

Because #menu ul li a:visited {background: #eef; color:#666;}, what really works after the mouse is moved is
a:visited
because this is menu navigation , the content will change every time you click it. I just hope that the navigation bar can be fixed to the style when a:active according to the selected menu, and I don’t want it to remain in this style after it is accessed.

Can this be implemented using pseudo classes?

. . . Active means when clicked. Link means after clicked. LZ, please go and see what the pseudo-class means first.

Quoting the reply from conan8126 on the 1st floor:
Because #menu ul li a:visited {background: #eef; color:#666;}, what really works after the mouse is moved is
a:visited
because this is a menu navigation, and the content will change every time you click it. I hope that the navigation bar can be based on the selected menu. The style is fixed to a:active, and we don’t want it to remain in this style after it is accessed.

Can this be implemented using pseudo classes?

In fact, for this problem, set a style for the unselected navigation menu, set a style for the unselected navigation menu, and then use javascript to implement it. The code is as follows

function selectTab(idx) {    for (var i = 1; i <= 7; i++) {       if (idx == i) {            document.getElementById("TD" + i).className = "tabSelect";       } else {            document.getElementById("TD" + i).className = "tabUnSelect";       }    }}

Thank you @conan8126! !