如何使我的导航栏可点击或响应？

Question

嘿，我只是想问一下如何让我的导航栏可以用图标点击。我的图标不会将页面重定向到我想去的地方，这就是我需要帮助的地方，感谢您提前提供帮助：D！这是我的代码：

HTML:

.navbar__link {
    position: static;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 15px;
    margin: 20px 0;
    border-radius: 10px;
    background: #ffffff;
    color: #000000;
    border-bottom: 1px solid #ffffff;
    display: flex;
    text-align: center;
    display: inline-block;
    padding: 20px;
}
}

// you don't need to add class to a tag, it can be selected by following way
.navbar > a {
  text-decoration: none;
  padding: 15px;
}

.header {
  display: flex;
  // make the header take all space of body
  width: 100%;
}

.navbar {
  display: flex;

  // make navbar take all space that remains after the logo
  flex: 1;
  justify-content: center;

  // make the navbar move left side else it will not be in complete middlle
  transform: translate(-100px);
}

<body>
  <header>
    <div style="float: left; padding-right: 10px;">
      <a href="/"><img width='200' height='50' src='Icons/company home.png' /></a>
    </div>
    <div class="navbar" style="justify-content: center;">
      <a href="#" class="navbar__link">
        <span class="material-icons">whatshot</span>
      </a>
      <a href="#" class="navbar__link">
        <span class="material-icons">search</span>
      </a>
      <a href="#" class="navbar__link">
        <span class="material-icons">person_outline</span>
      </a>
    </div>
  </header>
</body>

如果您确实找到或知道修复方法，请回答，然后编辑代码并在此行下方写下修复方法

[更新]（已修复）

Answer 1

这可能是因为您的 a 标签中的 href 属性主要指向 # 或 / 而不是您要加载的文件。 href指的是Hypertext Reference，你把你要定位的file/id/class的link放在这个属性里。您可以阅读更多 here.

为了 link 你的 a 标签到另一个 HTML 文件，你只需将 # 或 / 更改为 HTML你想要的文件。例如：

<a href="samplehtml123.html" [other attributes]><span></span></a>

href="#" 也有效，但在这种情况下它会重定向到页面顶部，因为它只留在 # 处且未指定。通常，# 在您的 HTML 代码中查找具有特定 ID 的元素。例如，我可能有一个如下所示的 p 标签：

<p id="samplepara">This is some sample text.</p>

然后，我可以在我的 href 属性中引用它：

<a href="#samplepara" [other attributes]><span></span></a>

当我点击该图标时，我将被定向到网页中具有该 ID 的元素，而不是被定向到另一个文件。每个 HTML 元素的 ID 都是唯一的，不能重复使用，因此 href 属性可以重定向到一个 ID，但不能重定向到 class。至于/，不支持，将被忽略。

如何使我的导航栏可点击或响应？

How do I make my navbar clickable or responsive?

html

javascript

css

nav

navbar