如何在同一个 html 文件的 href 中 link "class" 命名？

Question

我想link项目class进入导航项。如何将 link 的 class 名称放入 href？

导航项代码

<li class="nav-item">
     <a class="nav-link" href="#">Projects</a>
</li>

项目代码

<div class="projects">
      <h4>--Projects--</h4>
       .....
</div>

两个代码都在同一个 HTML 文件中。

Answer 1

为了获得此行为，您将不得不使用 IDs 而不是 classes。 IDs每页只能使用一次。现在据我了解，您希望导航项跳转到页面的特定部分。在此示例中，您可以将 <a href="#projects" 指定到您希望页面跳转的位置。因此，在此示例中，单击导航项“项目”后，您将跳转到页面的 div id="projects" 部分。

<li class="nav-item">
     <a href="#projects" class="nav-link">Projects</a>
</li>

I want to link the project class into the nav item. How can I link the class name into the href?

code of nav item
<li class="nav-item">
     <a class="nav-link" href="#">Projects</a>
</li>
code of projects
<div id="projects">
      <h4>--Projects--</h4>
       .....
</div>

Answer 2

您可以设置标签以滚动到使用 ID 的元素，例如 <a href="#id-of-target-element">。请参阅下面的示例。

.container {
  margin-top: 100px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<nav class="navbar navbar-default navbar-fixed-top">
    <ul class="nav navbar-nav justify-content-center">
      <li class="nav-item">
        <a class="nav-link" href="#projects">Projects</a>
      </li>
    </ul>
</nav>

<div class="container">
  <h1>This is a filler container</h1>
  <p>The purpose of this container is to take up space between the navbar and the element to which you want to scroll. Using an href to scroll to a specific element is called "Anchor Tags." You can google it and read more about it, but it's a pretty easy concept. Just put <code>&lt;a href="#element-id"&gt;Some Text&lt;/a&gt;</code>.
  <br><br>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vehicula, nisl quis tincidunt cursus, lectus velit facilisis erat, a lacinia eros diam quis massa. Donec pellentesque euismod lacus a egestas. Duis non orci purus. Phasellus at felis et nunc sodales placerat vulputate id ex. Nunc consequat varius dolor, nec bibendum ligula fermentum vel. Morbi aliquam eu turpis sit amet molestie. Nulla luctus eu enim a porta. In maximus et nibh sed accumsan.
  <br><br>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vehicula, nisl quis tincidunt cursus, lectus velit facilisis erat, a lacinia eros diam quis massa. Donec pellentesque euismod lacus a egestas. Duis non orci purus. Phasellus at felis et nunc sodales placerat vulputate id ex. Nunc consequat varius dolor, nec bibendum ligula fermentum vel. Morbi aliquam eu turpis sit amet molestie. Nulla luctus eu enim a porta. In maximus et nibh sed accumsan.
  <br><br>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vehicula, nisl quis tincidunt cursus, lectus velit facilisis erat, a lacinia eros diam quis massa. Donec pellentesque euismod lacus a egestas. Duis non orci purus. Phasellus at felis et nunc sodales placerat vulputate id ex. Nunc consequat varius dolor, nec bibendum ligula fermentum vel. Morbi aliquam eu turpis sit amet molestie. Nulla luctus eu enim a porta. In maximus et nibh sed accumsan.</p>
</div>

<div class="container" style="border: 1px solid black;">
  <div class="projects" id="projects">
    <h4>Projects</h4>
    <p>This is the container you want to scroll to.</p>
  </div>
</div>

<div class="container">
  <h1>This is another filler container</h1>
  <p>  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vehicula, nisl quis tincidunt cursus, lectus velit facilisis erat, a lacinia eros diam quis massa. Donec pellentesque euismod lacus a egestas. Duis non orci purus. Phasellus at felis et nunc sodales placerat vulputate id ex. Nunc consequat varius dolor, nec bibendum ligula fermentum vel. Morbi aliquam eu turpis sit amet molestie. Nulla luctus eu enim a porta. In maximus et nibh sed accumsan.</p>
</div>

如何在同一个 html 文件的 href 中 link "class" 命名？

How to link "class" name in href of same html file?

html

css

tags

class

href

导航项代码

项目代码