我遇到了这样的问题（这是 html/css 菜单）：
网上商城 |另一个eshop |另一个网店
客户希望它像这样工作：
用户访问网站，点击 Eshop。 Eshop 变为带有红色框轮廓的红色。用户决定访问另一个eshop，所以eshop会恢复正常颜色，没有红框轮廓，另一个eshop会再次做红色轮廓的把戏..
我知道有 A:visited 但我不希望所有访问过的菜单链接都显示为红色并带有红色框框。
感谢任何帮助:)
【问题讨论】：
Joe Skora 写的相同，但更具体：
.red {
outline-color:red;
outline-width:10px;
}
现在您可以在 click-event-handler 中使用 Javascript（在此示例中使用 jQuery）：
$('.red').removeClass('red'); // removes class red from all items with class red
$(this).addClass('red'); // adds class red to the clicked item
另一种方法是使用伪选择器 :target。
有关它的信息：www.thinkvitamin.com
【讨论】：
您可以使用纯 CSS 和 HTML 来做到这一点。我们常用的一种方法是为每个导航项设置一个匹配的 ID 和类选择器。
这样做的好处是您不必修改每个页面的菜单代码，您可以修改页面本身，除非一切都是动态的。
它是这样工作的：
<!-- ... head, etc ... -->
<body>
<ul class="nav">
<li><a href="home.html" class="nav-home">Home</a></li>
<li><a href="art.html" class="nav-art">Art</a></li>
<li><a href="contact.html" class="nav-contact">Contact</a></li>
</ul>
<!-- ... more page ... -->
</body>
然后你像这样设置一些 CSS：
#NAV-HOME .nav-home,
#NAV-ART .nav-art,
#NAV-CONTACT .nav-contact { color:red; }
要更改“当前”菜单项，您只需将相应的 ID 分配给文档结构中较高的元素即可。通常我将它添加到
标记中。要突出显示“艺术”页面，您只需这样做：
<!-- The "Art" item will stand out. -->
<body id="NAV-ART">
<ul class="nav">
<li><a href="home.html" class="nav-home">Home</a></li>
<li><a href="art.html" class="nav-art">Art</a></li>
<li><a href="contact.html" class="nav-contact">Contact</a></li>
</ul>
<!-- ... more page ... -->
</body>
【讨论】：
您可以使用 CSS 类来做到这一点。例如，selected 类可以识别当前商店，改变颜色和轮廓。然后您可以通过在菜单项中添加/删除类来更改选择。
看一下here，它介绍了有关构建 CSS 菜单的教程。
【讨论】：
基本上，它不能单独使用 CSS 完成，必须执行一些脚本（服务器或客户端，最好是服务器）。正如其他人建议的那样，将“选定”类（或类似的东西）添加到活动链接，并在 CSS 中为其定义样式。
例如链接：
<a href="#">Eshop</a> | <a href="#" class="selected">Another eshop</a> | <a href="#">Another eshop</a>
样式：
.selected {
font-weight:bold;
color:#efefef;
}
链接将动态生成，例如使用 PHP：
<?php
foreach(array('eshop' => '#','another eshop' => '#','yet another eshop' => '#') as $title => $url) {
echo '<a href="' . $url . '"'
. ($url == $_SERVER['REQUEST_URI'] ? ' class="selected"' : null)
. '>' . $title . '</a>';
}
【讨论】：
如果您在相同浏览器窗口中移动到新页面，Zack Mulgrew 和 Bobby Jack两者都有很好的答案。
如果你是在新窗口打开eshop链接，单靠css是无能为力的，gs除了类名的选择（红色）。
这是什么？
【讨论】：
据我所知，您只能通过为每个页面生成不同的代码（为当前页面设置不同的类）或在页面加载后使用 JavaScript 更改菜单来做到这一点。
【讨论】：
你可以像这样使用和属性选择器...
a[href^="http:\\www.EShop"]:visted { color: red; }
通过这样做，您是在说任何具有以 http:\Eshop.com 开头的 href 并已访问过的链接都应用此样式。
【讨论】：
这取决于你的页面是如何构建的，但经典的 CSS 是在正文和每个导航链接上都有一个 id，所以你可能会有这样的东西：
eshop.html
<body id="eshop">
<ul>
<li><a href="" id="link-eshop">Eshop</a></li>
<li><a href="" id="link-aeshop">Another eshop</a></li>
<li><a href="" id="link-eshop-three">Another eshop</a></li>
</ul>
</body>
和相应的CSS：
#eshop #link-eshop, #aeshop, #link-aeshop, #eshop-three #link-eshop-three
{
color: red;
outline: 1px solid red;
}
导航是一致的；只有正文上的 id 会随着页面的变化而变化。
【讨论】：