active class using javascript

Question

after clicking on any of the navbar options page refrehes and active tab goes to "All" tab

but i want it to stick to the option i selcted

can anyone tell me whats wrong here

<nav class="navbar navbar-default word" id="myDIV">
        <div class="navbar-header">
        <div class="col-md-12">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
           <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                        <li class="active">
                            <a href="home.php">All</a>
                        </li>
                            
                    <?php foreach( $tag_arr AS $key => $tags_name ) { ?>                    
                        
                        <li>
                            <a href="home.php?tags='.$tags_name ?>"><?php echo  ucfirst($tags_name);  ?>
                            </a>
                        </li>

                    <?php } ?>
                    
                </ul>
            </div>
        </div>
    </nav>
    

<script>
    
$( '#myDIV .navbar-nav li' ).on( 'click', function () {
    //$(this).addClass('active');
    $('#myDIV .navbar-nav').find( 'li.active' ).removeClass('active');
    $( this ).addClass( 'active' );
});

</script>

Answer 1

I don't know why you have to put javascript here while your page will be redirected after click to a navbar item.

1. You only make all tab active if there is no query string tags or tags is empty
2. Make each tag active if there is query string tags equal to tag's name.

I didn't have a chance to test but I believe you need something like this:

<?php
$tag = $_GET["tags"];
?>

<nav class="navbar navbar-default word" id="myDIV">
        <div class="navbar-header">
        <div class="col-md-12">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
           <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                        <li
                          <?php if (!$tag) { ?>
                          class="active"
                          <?php } ?>
                        >
                            <a href="home.php">All</a>
                        </li>
                            
                    <?php foreach( $tag_arr AS $key => $tags_name ) { ?>                    
                        
                        <li
                          <?php if ($tag === $tags_name) { ?>
                          class="active"
                          <?php } ?>
                        >
                            <a href="home.php?tags='.$tags_name ?>">
                               <?php echo  ucfirst($tags_name);  ?>
                            </a>
                        </li>

                    <?php } ?>
                    
                </ul>
            </div>
        </div>
    </nav>