Navigating to another page and opening specific nav pill tab base on the selected nav link

Question

I'm using MDBootstrap, HTML, CSS, and Javascript. I have this in my navbar and I need to open a specific tab in About.html base on what I click in one of the dropdown-item.

  <div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
    <ul class="navbar-nav navbar-right">
      <li class="nav-item">
        <a class="nav-link" href="https://school-web-template.web.app/">Home</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" aria-haspopup="true" aria-expanded="false" href="https://school-web-template.web.app/about.html" >About</a>
        <div class="dropdown-menu dropdown-default" aria-labelledby="navbarDropdownMenuLink">
            <a class="dropdown-item" href="https://school-web-template.web.app/about.html#panel2">Mission and Vision</a>
            <a class="dropdown-item" href="https://school-web-template.web.app/about.html#panel3">Administrators</a>

This is the About.html

 <ul class="nav md-pills pills-secondary d-flex flex-column sticky-top">
            <li class="nav-item">
                <a class="nav-link active" data-toggle="tab" href="#panel1" role="tab">History</a>
              </li>
          <li class="nav-item">
            <a class="nav-link" data-toggle="tab" href="#panel2" role="tab">Vision and Mission</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" data-toggle="tab" href="#panel3" role="tab">Administrators</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" data-toggle="tab" href="#panel4" role="tab">Grade School Faculty</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" data-toggle="tab" href="#panel5" role="tab">High School Faculty</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" data-toggle="tab" href="#panel6" role="tab">Facilities</a>
          </li>
        </ul>

I tried doing this one I found here with similar situation but I guess I'm not doing it right.

$(document).ready(function () {

  // Set BaseURL
  var baseURL = 'https://school-web-template.web.app/'

  // Get current URL and replace baseURL
  var href = window.location.href.replace(baseURL, '');

  // Remove trailing slash
  href = href.substr(-1) == '/' ? href.substr(0, href.length - 1) : href;

  // Get last part of current URL
  var page = href.substr(href.lastIndexOf('/') + 1);

  // Add trailing slash if not empty (empty means we're currently at baseURL)
  page = page != '' ? page + '/' : page;

  // Select link based on href attribute and set it's closest 'li' to 'active'. 
  // .siblings('.active').removeClass() is only needed if you have a default 'active li'.
  $('a[href="' + baseURL + page + '"]', '.nav li').closest('li').addClass('active').siblings('.active').removeClass();

});