0

I am working on a project in PHP and I couldn't add ClassActive to the bootstrap Navbar

    <?php foreach ($category as $cat){echo <li class="nav-item><a class="nav-link" aria-current="page" href="categories.php?pageid='.$cat['ID'].'">'  .$cat['Name']. '</a></li>';}?>

Jquery=>

$('.navbar-nav .nav-item a').click(function(e) {

    $('.navbar-nav .nav-item a').removeClass('active');

    var $this = $(this);
    if (!$this.hasClass('active')) {
        $this.addClass('active');
    }
    //e.preventDefault();
});
CBroe
  • 91,630
  • 14
  • 92
  • 150
Anas Naser
  • 11
  • 2
  • How do you expect us to help when no code is included in your question? – Gert B. Nov 09 '21 at 09:38
  • I don't understand your if statement. Why check if the obj have active class, when you remove the active class just above? – Carsten Løvbo Andersen Nov 09 '21 at 09:40
  • 1
    First of all, don't name a variable '$this'. Next a question. when you click a link, you go to another page? in that case your jQuery code works, but you will never see it, because you navigate away from the page you are on. – Gert B. Nov 09 '21 at 09:42
  • @GertB. Well, naming a jQuery variable with a `$` at the beginning is quite often seen on the web. It helps to see which are jQuery objects and not normal DOM elements or javascript variables. Good point about the link visited. But it might be a link with an hashtag to stay on this page and activate a tab or something similar. In any case, Anas's question needs a bit more details on what he wants to do. Depending on that some CSS may do the work without any JS. – Patrick Janser Nov 09 '21 at 09:49
  • 1
    @PatrickJanser variables with a `$` are used in js, and no problem for me. Calling it `$this` is a no go for me. This is a very confusing varname. calling it `var $clickedLink` would be less of a problem for me. The hashtag link is why I asked the question if clicking the link visits another page. – Gert B. Nov 09 '21 at 09:53
  • @GertB. Oh yes! well pointed! I didn't think about the `$this` itself, stupid me! The question has been updated and effectively the link is loading another page, so as you say, no point in adding the `active` class since this could be done with some CSS `.navbar-nav .nav-item a:active` – Patrick Janser Nov 09 '21 at 10:09
  • The Problem Is Not About Variables Name It's Work With Me In Author Templet But I Think The Problem In Foreach Loop – Anas Naser Nov 09 '21 at 10:15
  • The problem is probably that you leave the page, so the js is not executed. the comment about the variable name was a tip. – Gert B. Nov 09 '21 at 10:36

1 Answers1

0

When you click the link in the navigation, the browser will go to that link. To prevent this, you have the line commented out (e.preventDefault). If the application is not a single page application, you can write a function which will be executed on each page load [$(document).on('load, ()=>{});] where you check for the current URL and add the class .active to the corresponding element.

possible solution here How do I make Bootstrap navbar change active state?

Or like this code from GeeksForGeeks

<script>
  
            /* Code for changing active 
            link on clicking */
            var btns = 
                $("#navigation .navbar-nav .nav-link");
  
            for (var i = 0; i < btns.length; i++) {
                btns[i].addEventListener("click",
                                      function () {
                    var current = document
                        .getElementsByClassName("active");
  
                    current[0].className = current[0]
                        .className.replace(" active", "");
  
                    this.className += " active";
                });
            }
  
            /* Code for changing active 
            link on Scrolling */
            $(window).scroll(function () {
                var distance = $(window).scrollTop();
                $('.page-section').each(function (i) {
  
                    if ($(this).position().top 
                        <= distance + 250) {
                          
                            $('.navbar-nav a.active')
                                .removeClass('active');
  
                            $('.navbar-nav a').eq(i)
                                .addClass('active');
                    }
                });
            }).scroll();
        </script>
grisuu
  • 189
  • 1
  • 9