是否可以设置仅在查看链接网页时显示的链接样式？
Posted
技术标签:
【中文标题】是否可以设置仅在查看链接网页时显示的链接样式？【英文标题】：Is it possible to set a style of link that shows only when the linked webpage is being viewed? 【发布时间】：2010-09-16 18:30:56 【问题描述】：我遇到了这样的问题（这是 html/css 菜单）：
网上商城 |另一个eshop |另一个网店
客户希望它像这样工作：
用户访问网站，点击 Eshop。 Eshop 变为带有红色框轮廓的红色。用户决定访问另一个eshop，所以eshop会恢复正常颜色，没有红框轮廓，另一个eshop会再次做红色轮廓的把戏..
我知道有 A:visited 但我不希望所有访问过的菜单链接都显示为红色并带有红色框框。
感谢任何帮助:)
【问题讨论】：
你能澄清一下用例吗，新网站会在新窗口/iframe 中打开吗？您只想突出显示最后选择的链接吗？ Eshop网站关闭时是否需要取消选择？ 不，它们在同一个窗口中打开，是的，它应该在关闭网站后取消选择。我想突出显示“活动网站的链接”.. 【参考方案1】：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
【讨论】：
这依赖于不针对单个页面的链接，虽然可能，但不太可能【参考方案2】：您可以使用纯 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>
【讨论】：
【参考方案3】：您可以使用 CSS 类来做到这一点。例如，selected 类可以识别当前商店，改变颜色和轮廓。然后您可以通过在菜单项中添加/删除类来更改选择。
看一下here，它介绍了有关构建 CSS 菜单的教程。
【讨论】：
你能说得更具体些吗？【参考方案4】：基本上，它不能单独使用 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>';
【讨论】：
【参考方案5】：如果您在相同浏览器窗口中移动到新页面，Zack Mulgrew 和 Bobby Jack两者都有很好的答案。
如果你是在新窗口打开eshop链接，单靠css是无能为力的，gs除了类名的选择（红色）。
这是什么？
【讨论】：
【参考方案6】：据我所知，您只能通过为每个页面生成不同的代码（为当前页面设置不同的类）或在页面加载后使用 JavaScript 更改菜单来做到这一点。
【讨论】：
【参考方案7】：你可以像这样使用和属性选择器...
a[href^="http:\\www.EShop"]:visted color: red;
通过这样做，您是在说任何具有以 http:\Eshop.com 开头的 href 并已访问过的链接都应用此样式。
【讨论】：
【参考方案8】：这取决于你的页面是如何构建的，但经典的 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 会随着页面的变化而变化。
【讨论】：
以上是关于是否可以设置仅在查看链接网页时显示的链接样式？的主要内容，如果未能解决你的问题，请参考以下文章
NatTable 示例中是不是有任何 API 在单击查看源链接时显示源代码？