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

如何解决单击导航栏中的任何项目时，如何激活导航栏中的链接？

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

我编写了如下所示的 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 -->

我该如何解决这个问题？

解决方法

$(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 代替

,

您要在 active 元素上添加 li 类。它应该添加到 a 元素中。以下应该有效：

<script type="text/javascript">

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

</script>

但是它会失败，因为您正在切换页面，并且每次单击锚元素时都会重新加载 javascript。

我认为这就是您要找的：

var current = location.pathname;
$('.navigation-bar li a').each(function(){
    var $this = $(this);
    
    if($this.attr('href').indexOf(current) !== -1){
        $this.addClass('active');
    }
})

它基本上搜索当前处于活动状态的导航元素，在 active 元素上添加 a 类。

,

解决办法如下：

导航栏

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

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