你可以使用JQurey来默认隐藏选项卡（如果你需要的话--但这更重要），然后在点击时显示它们，就像这样：

jQuery(document).ready(function($) {
  $(function() {
    $('.tab-details > div').hide(); //to hide the tabs by default

    $('#name').click(function() {
      $('.tab-details > div').hide();
      $('#name-tab').show(); //to show only the specific one...
    });
    $('#password').click(function() {
      $('.tab-details > div').hide();
      $('#password-tab').show();
    });
    $('#security').click(function() {
      $('.tab-details > div').hide();
      $('#security-tab').show();
    });
  });

});

.settings {
  display: flex;
}

.tab-details {
  margin-left: 30px;
  margin-top: 20px
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="settings">
  <div class="side-nav">
    <ul class="sidebar-nav">
      <li>
        <a class="nav-link" id="name" href="#">Name</a>
      </li>
      <li>
        <a class="nav-link" id="password" href="#">Password</a>
      </li>
      <li>
        <a class="nav-link" id="security" href="#">Security</a>
      </li>
    </ul>
  </div>
  <div class="tab-details">
    <div id="name-tab">
      <form>
        <label class="form-label" for="first-name">Name</label>
        <input type="text" id="" class="form-control" />

        <button type="submit" class="btn btn-primary btn-block mb-4">
                  Save
                </button>
      </form>
    </div>
    <div id="password-tab">
      <form>
        <label class="form-label" for="first-name">password</label>
        <input type="text" id="" class="form-control" />

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

请注意，您必须为脚本工作的链接分配id。