1

我遇到了这样的问题（这是 html/css 菜单）：

网店 | 另一个eshop | 另一个网店

客户希望它像这样工作：

用户访问网站，点击 Eshop。Eshop 变为带有红色框轮廓的红色。用户决定访问另一个eshop，所以eshop会恢复正常颜色，没有红框轮廓，另一个eshop会再次做红色轮廓的把戏。

我知道有 A:visited 但我不希望所有访问过的菜单链接都是红色的并带有红色框轮廓。

感谢任何帮助:)

4

8 回答 8

2

与乔·斯科拉（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

于 2008-10-12T15:31:19.100 回答
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 分配给文档结构中较高的元素即可。通常我将它添加到 <body> 标记中。

要突出显示“艺术”页面，您所要做的就是：

<!-- 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-13T22:59:43.487 回答
1

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

看看这里，它介绍了有关构建 CSS 菜单的教程。

于 2008-10-12T14:59:02.897 回答
1

基本上，它不能单独使用 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-12T15:32:12.627 回答
1

如果您在同一个浏览器窗口中移动到新页面， Zack Mulgrew和Bobby Jack都有很好的答案。

如果你是在新窗口中打开eshop链接，单靠css是无能为力的，gs除了选择类名（红色）外，还有一个合理的答案。

它是哪一个？

于 2008-10-14T16:57:11.347 回答
0

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

于 2008-10-12T15:19:27.923 回答
0

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

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

通过这样做，您是在说任何具有以 http:\Eshop.com 开头的 href 并已访问过的链接都应用此样式。

于 2008-10-13T22:35:32.600 回答
0

这取决于你的页面是如何构建的，但经典的 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-13T23:09:01.143 回答