时间戳

首页 > 解决方案 > 当我单击导航栏中的任何项目时，如何激活导航栏中的链接？

javascript - 当我单击导航栏中的任何项目时，如何激活导航栏中的链接？

问题描述

当我单击导航栏中的任何选定项目时，我遇到了将类属性更改为活动状态的问题。

我编写了如下所示的这段 js 代码来实现这个过程，但它不起作用。

这是我的HeaderPartialView部分。

.... css files
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

这是我的_Layout.cshtml部分。

....
@{
Html.RenderAction("HeaderPartial", "Home");
}

@{
    Html.RenderAction("NavbarPartial", "Home");
}  

....
@{
   Html.RenderAction("JSFilesPartial", "Home");
}

这是我的JSFilesPartial文件。

<script src="~/Content/SiteLayout/assets/js/navigation-bar.js"></script>

这是我的navigation-bar.js文件。

    $(document).ready(function () {
        var current = location.pathname;
        $('.navigation-bar li a').each(function(){
            var $this = $(this);

            if($this.attr('href').indexOf(current) !== -1){
                $this.addClass('active');
            }
        })
    });

这是NavbarPartial文件。

<nav id="navbar" class="navbar">
      <ul class="navigation-bar">
           <li><a class="active" href="/Home/Index">Home</a></li>
           <li><a href="/Home/About Us">About Us</a></li>
           <li><a href="/Home/Projects">Projects</a></li>
      </ul>
    <i class="bi bi-list mobile-nav-toggle"></i>
</nav><!-- .navbar -->

我该如何解决这个问题？

标签： javascripthtmlasp.net-mvcnavnavigationbar

解决方案

$(document).ready(() => {
  $(".somClass li a").on('click', (e) => {
    $(".somClass li a").removeClass('active');
    $(e.target).addClass('active');
  });
});
.active {
  color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="somClass">
  <li><a class="active" href="#">link 1</a></li>
  <li><a href="#">link 2</a></li>
  <li><a href="#">link 3</a></li>
</ul>

由于您有活动类作为锚元素的道具，因此您应该尝试.navigation-bar li a使用

推荐阅读