对于一个项目我的工作，我需要确保当一个应用程序的一部分正在使用一个不同的二级导航正在显示。下面的代码是不同的导航，我需要显示，但当我对所需的按钮时钟二级导航不会出现
主导航：

<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow">
    <div class="container-fluid">
        <a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">ProjectBumbo</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".navbar-collapse" aria-controls="navbarSupportedContent"
                aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
            <ul class="navbar-nav flex-grow-1">
                <li class="nav-item">
                    <a class="nav-link text-dark" asp-controller="Prognosis" asp-action="Index">Prognosis</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link text-dark" asp-area="Rooster" asp-controller="" asp-action="">Planning</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link text-dark" asp-area="" asp-controller="" asp-action="">Uren registratie</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link text-dark" asp-area="" asp-controller="" asp-action="">Medewerkers</a>
                </li>
            </ul>
            <partial name="_LoginPartial" />
        </div>
    </div>
</nav>

字符串
当点击预后链接时，我需要显示此导航

<nav class="navbar navbar-expand-md" id="PrognosisNav" style="display:none;">
    <ul class="navbar-nav">
        <li class="nav-item">
            <a class="nav-link text-dark border-bottom border-dark" asp-controller="Prognosis" asp-action="Index">Prognose</a>
        </li>
        <li class="nav-item">
            <a class="nav-link text-dark border-bottom border-dark" asp-controller="ExpectationLoad" asp-action="Index">Klanten & Collie beheren</a>
        </li>
        <li class="nav-item">
            <a class="nav-link text-dark border-bottom border-dark" asp-controller="Standardization" asp-action="Index">Normering beheren</a>
        </li>
        <li class="nav-item">
            <a class="nav-link text-dark border-bottom border-dark" asp-controller="StoreInfo" asp-action="Index">Winkel Informatie</a>
        </li>
    </ul>
</nav>

型
当计划按钮被点击我需要在这个导航加载

<nav class="navbar navbar-expand-md" id="RoosterNav" style="display:none;">
    <ul class="navbar-nav">
        <li class="nav-item">
            <a class="nav-link text-dark border-bottom border-dark" asp-controller="Rooster" asp-action="">Rooster overzicht</a>
        </li>
        <li class="nav-item">
            <a class="nav-link text-dark border-bottom border-dark" asp-controller="" asp-action="">Inroosteren</a>
        </li>
        <li class="nav-item">
            <a class="nav-link text-dark border-bottom border-dark" asp-controller="" asp-action="">Vervanging</a>
        </li>
        <li class="nav-item">
            <a class="nav-link text-dark border-bottom border-dark" asp-controller="" asp-action="">Verlof Verzoeken</a>
        </li>
    </ul>
</nav>

型
我尝试使用此JavaScript代码，但它不会工作

<script>
    document.addEventListener('DOMContentLoaded', function () {
        const prognosisLink = document.querySelector('a[asp-controller="Prognosis"]');
        const prognosisNav = document.getElementById('PrognosisNav');
        const roosterLink = document.querySelector('a[asp-controller="Rooster"]');
        const roosterNav = document.getElementById('RoosterNav');

        prognosisLink.addEventListener('click', function (event) {
            event.preventDefault();
            prognosisNav.style.display = 'block';
            roosterNav.style.display = 'none';
        });

        roosterLink.addEventListener('click', function (event) {
            event.preventDefault();
            roosterNav.style.display = 'block';
            prognosisNav.style.display = 'none';
        });
    });
</script>

型