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

Question

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

我写了下面显示的这个 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>

这是我的导航-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 -->

我该如何解决这个问题？

Answer 1

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

因为你有活跃的 class 作为锚元素的支柱你应该尝试使用 .navigation-bar li a 而不是

Answer 2

您要在 li 元素上添加 active class。它应该添加到 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');
    }
})

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

Answer 3

解决方法如下：

导航栏

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

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

How can I active link in Navigation Bar when I click any item located in that bar?

html

javascript

asp.net-mvc

nav

navigationbar