如何在同一html檔案的href中鏈接“類”名稱？

我想將專案類鏈接到導航項。如何將類名鏈接到 href 中？

導航項的代碼

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

專案代碼

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

兩個代碼都在同一個 HTML 檔案中。

uj5u.com熱心網友回復：

為了獲得這種行為，您將不得不使用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>

uj5u.com熱心網友回復：

您可以設定標簽以使用 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 css 班级 标签 href

上一篇：如何獲取Ruby類中定義的方法串列？

下一篇：函式檢查串列中的所有元素是否都是數字