问CSS样式在通过HTML锚标签登陆页面时不显示，我如何“恢复”它？
EN

Stack Overflow用户

提问于 2022-07-20 22:53:41

回答 1查看 52关注 0票数 -1

我有一个index.html页面，在该页面中，用户可以通过锚标记转到contact.html页面。在contact.html页面上，我也有一些锚点标记，可以将用户带回到index.html页面的特定部分。它可以工作，但一旦我们回到index.html，它就不会显示样式。我怎么才能解决这个问题？您可以在下面看到contact.html的参考资料：

    <li class="nav-item">
       <a class="nav-link" href="/index.html/#footer">Contact</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="/index.html/#pricing">Pricing</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="/index.html/#cta">Download</a>
    </li>

谢谢。

我将按要求添加更多信息--现在，当我单击contact.html页面中的导航条链接时，而不是"unstyled“索引页，这个错误将弹出: Error: ENOTDIR:不是目录，而是stat contact.html

无论如何，还有一些CSS和HTML代码的片段：

contact.html中的引导导航条

<body>

  <nav class="navbar navbar-expand-lg navbar-dark fixed-top">
    <a class="navbar-brand" href="#">tinflix</a>
    <button class="navbar-toggler" type="button" data-bs- 
     toggle="collapse" data-bs-target="#navbarSupportedContent" aria- 
     controls="navbarSupportedContent" aria-expanded="false" aria- 
     label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ms-auto">
        <li class="nav-item">
           <a class="nav-link" href="/index.html/#footer">Contact</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="/index.html/#pricing">Pricing</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="/index.html/#cta">Download</a>
        </li>
      </ul>
    </div>
  </nav>

</body>

在index.html中，页面被分成带有is的部分，例如：

<section id="pricing">
  <h1 class="big-white-header"> This is the pricing section </h1>
</section>

至于CSS，举个例子：

  body {
    font-family: 'Montserrat', sans-serif;
    text-align: center;
  }
  h1, h2, h3, h5 {
    font-weight: bold;
  }
  .big-white-header {
    color: #fff;
    font-size: 3rem;
    line-height: 1.5;
  }

如果需要更多的信息，请告诉我，谢谢你的帮助！

通过删除导航链接中的斜线来解决这个问题！谢谢你帮助我的每个人

css

anchor

javascript

html

回答 1

Stack Overflow用户

发布于 2022-07-25 01:14:45

解决方案-从导航项的href链接中删除斜杠，如下所示：

 <ul class="navbar-nav ms-auto">
    <li class="nav-item">
       <a class="nav-link" href="index.html#footer">Contact</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="index.html#pricing">Pricing</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="index.html#cta">Download</a>
    </li>