导航到另一页并在所选导航链接的基础上打开特定的导航丸选项卡

编程问答 2022-06-09

问题描述

我正在使用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();

});

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

htmljavascriptjquerymdbootstrapnavbar