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

单击导航栏中的任何选定项时，将“类”属性更改为“活动”时出现问题

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

这是我的校长部分视图

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

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

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

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

这是我的jsfilesparial文件

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

这里是NavbarPartial文件

    $(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');
            }
        })
    });

<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 -->

如何解决此问题？

$（文档）.ready（（）=>{
$（“.somlia”）。在（'click'，（e）=>{
$（“.somClass li a”）.removeClass（'active'）；
$（e.target）.addClass（'active'）；
});
});
.active{
颜色：红色；
}





您正在
li
元素上添加
active
类。它应该添加到
元素中。以下方面应起作用：

<script type="text/javascript">

    $(document).ready(function () {
        $(".navigation-bar li a").on("click", function () {
            $(".navigation-bar li a").removeClass("active");
            $(this).addClass("active");
        });
    });

</script>

它基本上是使用当前处于活动状态的导航元素进行搜索，在
a
元素上添加
active
类。
以下是解决方案：

导航栏

<nav id="navbar" class="navbar">
            <ul class="navigation-bar">
                <li><a href="/Home/Index">AnaSayfa</a></li>
                <li><a href="/Home/Hakkimizda">Hakkımızda</a></li>
                <li><a href="/Home/Hizmetler">Hizmetler</a></li>
                <li><a href="/Content/SiteLayout/portfolio.html">Portfolio</a></li>
                <li><a href="/Content/SiteLayout/blog.html">Blog</a></li>
                <li><a href="/Home/BizKimiz">Biz Kimiz</a></li>
                <li><a href="/Home/Iletisim">Bize Ulaşın</a></li>
            </ul>
            <i class="bi bi-list mobile-nav-toggle"></i>
        </nav><!-- .navbar -->

我更新了我的帖子。您最初提供的HTML/JS代码仅在href位于当前页面内时有效，例如：
。由于您正在更改页面-意味着您在家（/Home/Index），然后单击项目（/Home/Projects），代码将返回其初始状态，因为您正在切换页面。如何解决代码返回初始状态的问题？我也更新了答案。请看看它是否能根据你的需要工作。那么它能工作了吗？主页链接仍然处于活动状态，因为HTML代码中硬编码了
active
类，只需将其删除即可。它应该是这样才能正常工作：
..
我又更新了我的帖子。
<nav id="navbar" class="navbar">
            <ul class="navigation-bar">
                <li><a href="/Home/Index">AnaSayfa</a></li>
                <li><a href="/Home/Hakkimizda">Hakkımızda</a></li>
                <li><a href="/Home/Hizmetler">Hizmetler</a></li>
                <li><a href="/Content/SiteLayout/portfolio.html">Portfolio</a></li>
                <li><a href="/Content/SiteLayout/blog.html">Blog</a></li>
                <li><a href="/Home/BizKimiz">Biz Kimiz</a></li>
                <li><a href="/Home/Iletisim">Bize Ulaşın</a></li>
            </ul>
            <i class="bi bi-list mobile-nav-toggle"></i>
        </nav><!-- .navbar -->

$(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');
        }
    })
});