Javascript 导航到另一页并基于所选导航链接打开特定导航选项卡
我正在使用MDBootstrap、HTML、CSS和Javascript。我的导航栏中有这个,我需要在About.html中打开一个特定的选项卡,该选项卡基于我在其中一个下拉项中单击的内容Javascript 导航到另一页并基于所选导航链接打开特定导航选项卡,javascript,html,jquery,navbar,mdbootstrap,Javascript,Html,Jquery,Navbar,Mdbootstrap,我正在使用MDBootstrap、HTML、CSS和Javascript。我的导航栏中有这个,我需要在About.html中打开一个特定的选项卡,该选项卡基于我在其中一个下拉项中单击的内容 <div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent"> <ul class="navbar-nav navbar
<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>
<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();
});