Question

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

Eshop |另一个eshop |另一家网店

客户希望它的工作方式如下：

用户访问网站，点击Eshop。 Eshop用红色框轮廓改为红色。用户决定访问另一家eshop，因此Eshop将恢复正常颜色而没有红框轮廓，另一家eshop将再次进行红色轮廓技巧..

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

任何帮助的Thx：）

Answer 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

Answer 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分配给文档结构中较高的元素即可。通常我将它添加到＆lt; body＆gt;标签

要突出显示“艺术”页面，您只需要这样做：

<!-- 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>

Answer 3

您可以使用CSS类执行此操作。例如，选定的类可以识别当前商店，更改颜色和轮廓。然后，您可以通过在菜单项中添加/删除类来更改选择。

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

Answer 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>'; 
 }

Answer 5

如果您要移至相同浏览器窗口中的新页面， Zack Mulgrew 和 Bobby Jack 两者都有很好的答案。

如果您在新窗口中打开eshop链接，单独使用css的功能并不多， gs 除了选择类名（ >红色）。

这是什么？

Answer 6

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

Answer 7

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

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

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

Answer 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;
}

导航一致;只有身体上的身份证在页面之间发生变化。

是否可以设置仅在查看链接网页时显示的链接样式？

8 个答案: