PHP-GET + Jquery add/removeClass

Question

I have a navbar, where the selected category should have other css like color and background. At the top of the page, I included some functions from google charts API also I use bootstrap.

Code:

<?php echo '        
<nav class="navbar navbar-default navbar-schuberth">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">Monatsreporting</a>
    </div>
    <ul class="nav navbar-nav">
      <li><a href="?report=test">1</a></li>
      <li><a href="#">2</a></li>
      <li><a href="#">3</a></li>
    </ul>
  </div>
</nav>      
<div class="container-fluid">';

if($_GET['report']=='test') {   
    echo '<div class="row">
    <!--Google REGISTRATION BY PRODUCTS-->
        <div id="barchart_material" class="col-xs-8 col-md-8" style="width: 900px; height: 600px;"></div>
            <div class="erklaerung col-xs-4 col-md-4"><p>Text</p></div>
    </div>
    <div class="row">
        <div class="col-xs-12 col-md-12"><p>Text</p></div>
    </div>'; }

To change the active navbar item I use a class called 'active' and set it when the user clicks a item.

Code:

$(document).ready(function () {

    $(".navbar li").on("click", function(){
        $(this).siblings('li').removeClass('active');
        $(this).addClass("active");
});
    });

Problem: If i click a navbar-Item which got a blank-link ('#'), setting and removing the class 'active' works just fine. If I click the first Item, which is sending a PHP-GET-Variable, the class gets removed and set to the clicked Item 1, but then the class gets removed.

So for testing I did the following:

<nav class="navbar navbar-default navbar-schuberth">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">Monatsreporting</a>
    </div>
    <ul class="nav navbar-nav">
      <li><a href="?report=test">1</a></li>
      <li class="active"><a href="#">2</a></li>
      <li><a href="#">3</a></li>
    </ul>
  </div>
</nav>    

I gave the second Item the class active by default. So when i Click the first Item, class active from 2 gets removed, is set to 1. But then, like 1 second later, the class active is removed from item 1 again and is set back to item 2.

So it seems like the page gets completely reloaded AFTER the Javascripts fires.

Any ideas?

Answer 1

The behavior you are describing is perfectly NORMAL. It has nothing to do with javascript.

Actually when you click the link, the page gets reloaded and the li having the active class set by default becomes active.

The javascript sets the first item active, just before the page reloads, that's why you see it active for "like a second", then when the page reloads, the default active will be the second one again.

In this case, you do not need javascript, you rather have to handle active menu items at PHP level per each request.