时间戳

首页 > 解决方案 > 基于当前页面的 HTML Wrapper 状态更新

html - 基于当前页面的 HTML Wrapper 状态更新

问题描述

我是 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事件，但是，是否有我想要实现的事件？

谢谢！

标签： htmlcsssasswrapper

解决方案

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

li.pressed { font-weight: bold; }

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

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

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

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

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

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

推荐阅读