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

Question

我是 HTML/CSS 的初学者。我目前在我的网站上有一个带有 link 的包装器，可以重定向到不同的页面。我的 objective 是将 link 更新为当我在相应页面时显示 pressed。

这方面的一个例子是，如果您处于堆栈溢出状态并单击 "Jobs" 页面，它会将您重定向到 Whosebug。com/jobs 而 link 是 highlighted/pressed.

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

<!-- 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 class，您可以将其分配给 li 元素以更改它的外观以显示它已 pressed 例如

li.pressed { font-weight: bold; }

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

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

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

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

的位置

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

客户端脚本会使用 window.location 属性，然后需要为 pressed 按钮找到匹配的 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 基于当前页面的包装器状态更新

HTML Wrapper state update based on current page

html

css

sass

wrapper