css - 如何保持单击菜单项的 CSS 样式选择

Question

这是我的菜单HTML代码

<div style="visibility:visible; color: #FFF; top:125px; width:100%; height:40px; position:absolute; display:block;background:#2B63B3;">
<ul id="trans-nav">
   <li><a href="#">Home</a></li>
   <li><a href="#">About us</a></li>
   <li><a href="#">Academic</a>
     <ul>
        <li> <a href="#">Sub Menu 1</a> </li>
        <li> <a href="#">Sub Menu 2</a> </li>
        <li> <a href="#">Sub Menu 3</a> </li>
     </ul>
   </li>
   <li><a href="#">Administration</a></li>
   <li><a href="#">Miscellanous</a>
     <ul>
       <li> <a href="#">Sub Menu 1</a> </li>
       <li> <a href="#">Sub Menu 2</a> </li>
     </ul>
   </li>
</ul>
</div>

这是菜单的 CSS 代码

#trans-nav { list-style-type: none; height: 40px; padding: 0px 15px; margin: 0px; }
#trans-nav li { float: left; width:110px; position: relative; padding: 0px; line-height: 40px; background: #2B63B3; text-align:center; }
#trans-nav li a { display: block; padding: 0 15px; color: #fff; text-decoration: none; }
#trans-nav li a:hover { color: #97B7E6; }
#trans-nav li ul { opacity: 0; position: absolute; left: 0; width: 8em; background: #2B63B3; list-style-type: none; padding: 0; margin: 0;  z-index:1;}
#trans-nav li:hover ul { opacity: 1; }
#trans-nav li ul li { float: none; position: static; height: 0; line-height: 0; background: none; }
#trans-nav li:hover ul li { height: 30px; line-height: 30px; }
#trans-nav li ul li a { background: #2B63B3; }
#trans-nav li ul li a:hover { background: #2B63B3; }

当我将鼠标悬停在任何菜单项上时，颜色会发生变化，当我单击该元素时，它会导航到该页面，但文本的颜色会恢复为白色。我想保留更改后的颜色，直到未单击任何其他菜单项为止。

任何意见、建议或指导都是值得赞赏的。

先谢谢大家

Answer 1

您可以通过 javascript 将“.current”类添加到 anchor 标记。并赋予它这些样式。

(或者，如果您的导航在所有页面上都是单独的，只需将其添加到当前页面导航，不需要 js。)