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*/

• Required for installation Prepare
 
 
> Arcade Game

• Adventure Game
   
• Strategy game


 
• Intelligence Games

 
• Racing game


• Chess and card game


• Educational Games

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! !