Блог

Я использую MDBootstrap, HTML, CSS и Javascript. У меня это есть на панели навигации, и мне нужно открыть определенную вкладку в About.html основывайтесь на том, что я нажимаю в одном из выпадающих меню.

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

Это 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>
  

Я попытался сделать то, что нашел здесь, с аналогичной ситуацией, но, думаю, я делаю это неправильно.

 $(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();

});