如何为单击的菜单项保持 CSS 样式选择答案

【问题标题】：How can I keep CSS style select for menu item clicked如何为单击的菜单项保持 CSS 样式选择
【发布时间】：2014-01-22 16:02:45
【问题描述】：

这是我的菜单 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; }

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

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

提前谢谢大家

【问题讨论】：

你是说你想让代表当前页面的菜单项保持白色吗？所以如果你点击子菜单1，当你再次悬停时，子菜单1项是白色的？
Target a link if that link links to the current page? 的可能重复项
@ElendilTheTall NO 我想说，当我将链接悬停时，它的颜色会从白色变为浅蓝色。现在假设我点击杂项主菜单的子菜单 1，然后杂项颜色应该是浅蓝色，它不应该变回原来的白色。
@Paulie_D 你提到的链接不是我要问的，我的问题完全不同。请再检查一遍

标签： css drop-down-menu

【解决方案1】：

您可以通过 javascript 将“.current”类添加到锚标记。并给它那些样式。

（或者如果您的导航在所有页面上都是独立的，只需将其添加到当前页面导航，无需 js。）

【讨论】：

我同意@Andrew Ice、here you have a fast example 的看法。
@Andrew Ice 感谢您的指导，但我想在 menu.php 文件中避免 javascript 和我的导航，我将在其他 .php 文件中包含该文件
JS 在这种情况下几乎是不可避免的。如果这是 WP，我相信“当前页面”有一个插件。
是的，好吧，唯一的例外是这个。在您网站的每个页面上都有一个导航栏，并将当前类添加到 html 本身中。这是避免 javascript 的唯一方法。
@Paulie_D 感谢您的建议，我实现了 Andrew Ice 和 NewPatrik 建议的代码，但是为什么当我单击任何子菜单时主菜单不保持颜色，实际上颜色是由子菜单，但子菜单对用户不可见，因此即使用户单击子菜单，主菜单也应保留颜色。因此，根据您的说法，我如何避免使用 JS，然后我必须编写大约 347 页的代码。任何想法