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 class="projects">
      <h4>--Projects--</h4>
       .....
</div>

both of the codes are in the same HTML file.

CodePudding user response：

In order to obtain this behavior, you're going to have to use IDs instead of classes. IDs can only be used once per page. Now from what I understand you want the nav item to jump to a particular part of the page. In this example, you would give your <a href="#projects" to where you want your page to jump. So in this example, once you click the nav item "Projects" you will jump to the div id="projects" portion of the page.

<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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

You can set a tags to scroll to an element using IDs, like <a href="#id-of-target-element">. See example below.

.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>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>