asp.net JavaScript CSS更改导航可见性

u3r8eeie  于 2024-01-09  发布在  .NET
关注(0)|答案(1)|浏览(235)

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

  1. <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow">
  2. <div class="container-fluid">
  3. <a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">ProjectBumbo</a>
  4. <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".navbar-collapse" aria-controls="navbarSupportedContent"
  5. aria-expanded="false" aria-label="Toggle navigation">
  6. <span class="navbar-toggler-icon"></span>
  7. </button>
  8. <div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
  9. <ul class="navbar-nav flex-grow-1">
  10. <li class="nav-item">
  11. <a class="nav-link text-dark" asp-controller="Prognosis" asp-action="Index">Prognosis</a>
  12. </li>
  13. <li class="nav-item">
  14. <a class="nav-link text-dark" asp-area="Rooster" asp-controller="" asp-action="">Planning</a>
  15. </li>
  16. <li class="nav-item">
  17. <a class="nav-link text-dark" asp-area="" asp-controller="" asp-action="">Uren registratie</a>
  18. </li>
  19. <li class="nav-item">
  20. <a class="nav-link text-dark" asp-area="" asp-controller="" asp-action="">Medewerkers</a>
  21. </li>
  22. </ul>
  23. <partial name="_LoginPartial" />
  24. </div>
  25. </div>
  26. </nav>

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

  1. <nav class="navbar navbar-expand-md" id="PrognosisNav" style="display:none;">
  2. <ul class="navbar-nav">
  3. <li class="nav-item">
  4. <a class="nav-link text-dark border-bottom border-dark" asp-controller="Prognosis" asp-action="Index">Prognose</a>
  5. </li>
  6. <li class="nav-item">
  7. <a class="nav-link text-dark border-bottom border-dark" asp-controller="ExpectationLoad" asp-action="Index">Klanten & Collie beheren</a>
  8. </li>
  9. <li class="nav-item">
  10. <a class="nav-link text-dark border-bottom border-dark" asp-controller="Standardization" asp-action="Index">Normering beheren</a>
  11. </li>
  12. <li class="nav-item">
  13. <a class="nav-link text-dark border-bottom border-dark" asp-controller="StoreInfo" asp-action="Index">Winkel Informatie</a>
  14. </li>
  15. </ul>
  16. </nav>


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

  1. <nav class="navbar navbar-expand-md" id="RoosterNav" style="display:none;">
  2. <ul class="navbar-nav">
  3. <li class="nav-item">
  4. <a class="nav-link text-dark border-bottom border-dark" asp-controller="Rooster" asp-action="">Rooster overzicht</a>
  5. </li>
  6. <li class="nav-item">
  7. <a class="nav-link text-dark border-bottom border-dark" asp-controller="" asp-action="">Inroosteren</a>
  8. </li>
  9. <li class="nav-item">
  10. <a class="nav-link text-dark border-bottom border-dark" asp-controller="" asp-action="">Vervanging</a>
  11. </li>
  12. <li class="nav-item">
  13. <a class="nav-link text-dark border-bottom border-dark" asp-controller="" asp-action="">Verlof Verzoeken</a>
  14. </li>
  15. </ul>
  16. </nav>


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

  1. <script>
  2. document.addEventListener('DOMContentLoaded', function () {
  3. const prognosisLink = document.querySelector('a[asp-controller="Prognosis"]');
  4. const prognosisNav = document.getElementById('PrognosisNav');
  5. const roosterLink = document.querySelector('a[asp-controller="Rooster"]');
  6. const roosterNav = document.getElementById('RoosterNav');
  7. prognosisLink.addEventListener('click', function (event) {
  8. event.preventDefault();
  9. prognosisNav.style.display = 'block';
  10. roosterNav.style.display = 'none';
  11. });
  12. roosterLink.addEventListener('click', function (event) {
  13. event.preventDefault();
  14. roosterNav.style.display = 'block';
  15. prognosisNav.style.display = 'none';
  16. });
  17. });
  18. </script>

nuypyhwy

nuypyhwy1#

标签助手“asp-...”只是为了方便开发。在浏览器页面中,这些标签助手是不可见的;因此,你不能在客户端js上访问它们。因此,我建议为每个锚元素添加一个id,并使用这些id添加事件侦听器。例如:

  1. <a class="nav-link text-dark" asp-controller="Prognosis" id="prognosis-link" asp-action="Index">Prognosis</a>

字符串
然后将您的相关行更改为:

  1. const prognosisLink = document.getElementById('prognosis-link');

相关问题