Question

我是HTML / CSS的完全入门者。我目前在我的网站上有一个包装，其中包含重定向到不同页面的链接。我的目标是更新链接，使其在相应页面上显示为“按下”。

例如，如果您遇到堆栈溢出的情况，然后单击“作业”页面，它将重定向您到stackoverflow.com/jobs，并且该链接被突出显示/按下。

据我了解，实现包装程序的方法是使用容器。

<!-- Wrapper -->
  <div id="wrapper">
    <!-- Header -->
    <header id="header">
      <h1><a href="index.html">myname</a></h1>

        <nav class="links">
          <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="resume.html">Resume</a></li>
            <li><a href="about.html">About</a></li>
          </ul>
        </nav>
     .
     .
     .

我的项目是一个预制的SASS主题，具有一个_wrapper.scss文件。我的目的不是编辑此文件，因为我认为我还不准备学习如何编译SASS文件并将其转换为CSS，但是还有另一种方法来获得我想要的结果吗？

我熟悉onmouseover和onmouseout事件，但是，我想要实现的目标是否有事件？

谢谢！

Answer 1

要开始定义一个CSS类，您可以将其分配给li元素以更改其外观，以显示其被按下，例如

li.pressed { font-weight: bold; }

然后，您需要一种方法，根据已加载的页面将此类应用于正确的li元素。如果您只是在每个页面上剪切并粘贴导航，就可以手动进行操作，例如

<li class="pressed"><a href="resume.html">Resume</a></li>

当您向站点添加越来越多的页面时，这种方法将无法很好地扩展。您需要能够将页面作为参数提供给某些脚本，该脚本将为您分配class属性。

您使用的脚本可以在客户端或服务器上运行。获取参数正确值的方式取决于脚本的运行位置。

服务器端脚本将使用该页面的HTTP请求中的信息来匹配按下按钮的href。

客户端脚本将使用window.location属性，然后需要为按下按钮找到匹配的href。

Answer 2

我相信您正在寻找的是：visited选择器。制作一个CSS文件并执行以下操作：

 a:visited{
    color:black
}

<!-- Wrapper -->
  <div id="wrapper">
    <!-- Header -->
    <header id="header">
      <h1><a href="index.html">myname</a></h1>

        <nav class="links">
          <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="resume.html">Resume</a></li>
            <li><a href="about.html">About</a></li>
          </ul>
        </nav>

基于当前页面的HTML包装器状态更新

2 个答案: