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

Question

I have a problem about changing the class attribute as active when I click any selected item in the navigation bar.

I wrote this js code which is shown below to implement this process but it didn't work.

Here is my HeaderPartialView part.

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

Here is my _Layout.cshtml part.

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

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

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

Here is my JSFilesPartial files.

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

Here is my navigation-bar.js file.

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

Here is NavbarPartial file.

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

How can I fix the issue?

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>

Since you have active class as prop of anchor element you should try with .navigation-bar li a instead

Answer 2

You're adding the active class on the li element. It should be adding to the a element instead. The following should work:

<script type="text/javascript">

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

</script>

But it will fail because you're switching pages, and the javascript is reloaded every time you click in a anchor element.

I think this is what you're looking for:

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

It basically searches with navigation element is currently active, adding the active class on the a element.

Answer 3

Here is the solution:

Navbar

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

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