I’m a beginner coder and have been trying to make my topnav bar work with my links to switch between tabs. It shows that the tabs are switching in the URL, but it doesn’t change the content being displayed.

This is the code

    <div class="flex-container">
      <ul class="topnav">
        <li class="nav-item">
          <a class="nav-link active hvr-underline-from-left" data-toggle="tab" href="#one">one</a>
        </li>
        <li class="nav-item">
          <a class="nav-link hvr-underline-from-left" data-toggle="tab" href="#two">two</a>
        </li>
        <li class="nav-item">
          <a class="nav-link hvr-underline-from-left" data-toggle="tab" href="#three">three</a>
        </li>
        <li class="nav-item">
          <a class="nav-link hvr-underline-from-left" data-toggle="tab" href="#four">four</a>
        </li>
      </ul>
    </div>
      <div id="content-wrap">
      <div id="butter">
        <div class="tab-content">
          <div id="one" class="tab-pane fade in active show">
            <p>text</p>
          </div>
          <div id="two" class="tab-pane fade">
            <p>text text</p>
          </div>
          <div id="three" class="tab-pane fade">
            <p>text text text</p>
          </div>
          <div id="four" class="tab-pane fade">
            <p>text text text text</p>
          </div>

        </div>
      </div>
      </div>

I have tried seeing if it was because of the “topnav” or if it was another thing like missing elements for the tab-content, but still haven’t found a solution. Still struggling to find out a way to make the content change, and it seems like it’d be a relatively easy solution that I’m just blindly walking over lol