是否可以设置仅在链接网页正在浏览时才显示的链接样式？

我有这样的问题（这是html/css菜单）：是否可以设置仅在链接网页正在浏览时才显示的链接样式？

网上商店|另一个eshop |另一个网上商店

客户希望它像这样工作的：

用户来到网站，点击网上商店。网上商店更改为红色，并带有红框大纲。用户决定访问另一个网上商店，所以Eshop将回到正常的颜色，没有红框大纲，而另一家网上商店将再次做红色轮廓技巧..

我知道有A：已访问但我不想全部访问过的菜单链接用红框大纲显示为红色。

Thx任何帮助:)

来源

2008-10-12 Skuta

你能否澄清一下用例，新网站是否在新窗口中打开/ iframe？你只想突出显示最后选择的链接？ Eshop网站关闭时是否需要取消选择？ – tpower 2008-10-12 15:53:28

不，他们在同一个窗口中打开，是的，关闭网站后应该取消选择。我想突出显示“活动网站的链接”.. – Skuta 2008-10-12 15:56:23

同乔斯科拉已经写，但更具体：

.red { 
    outline-color:red; 
    outline-width:10px; 
}

现在你可以使用JavaScript（使用jQuery本示例）在click事件处理程序：

$('.red').removeClass('red'); // removes class red from all items with class red 
$(this).addClass('red'); // adds class red to the clicked item

另一个这样做的方式是使用伪选择器：target。
有关它的信息：

来源

2008-10-12 15:31:19

你可以用CSS类来做到这一点。例如，选择的类可以识别当前店铺，改变颜色和轮廓。然后，您可以通过从菜单项中添加/删除类来更改选择。

看一看here，它介绍了构建CSS菜单的教程。

来源

2008-10-12 14:59:02

请问你能更具体吗？ – Skuta 2008-10-12 15:10:43

据我所知，只能通过为每个页面生成不同的代码（为当前页面设置不同的类）或在页面加载后使用JavaScript更改菜单来完成此操作。

来源

2008-10-12 15:19:27 Nir

基本上，它不能与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>'; 
}

来源

2008-10-12 15:32:12

你可以使用和属性选择器像这样...

a[href^="http:\\www.EShop"]:visted { color: red; }

通过这样做，您所说的任何链接的href以http：\ Eshop.com开头，并且已被visted应用此样式。

来源

2008-10-13 22:35:32

你可以用普通的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>

来源

2008-10-13 22:59:43

这取决于你的页面是如何构建的，但经典的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在页面之间变化。

来源

2008-10-13 23:09:01

如果你正在向一个新的页面中相同的浏览器窗口，扎克穆尔格鲁和鲍比·杰克既具有优良的答案。

如果打开一个新的窗口，网上商店的链接，没有太多你可以用CSS单独做的，GS除此之外具备的（红色）类名的选择一个合理的答案。

这是什么？

来源

2008-10-14 16:57:11 Traingamer

是否可以设置仅在链接网页正在浏览时才显示的链接样式？

回答

相关问题