CODEWITHSUNDEEP
phphtml
LeggoMaEggo
LeggoMaEggo

Reputation: 531

How to add an active class to navigation in PHP

I am trying to set 'active' classes onto the list nav elements on click. However, the add/removeclass runs before the new page is loaded, thereby setting the active class back to the index.php list element. Isn't the document.ready function supposed to run after the document has finished loading?

Clarifications: All the php files using the same "navbar" elements. The php files are in the same directory level.

$(document).ready(function() {  

    $(".nav > li").click(function() {  
        $(".nav li").removeClass("active");
        $(this).addClass("active");
    });
    
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<nav class="navbar navbar-inverse navbar-static-top">
<div class="container">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" href="#">Project name</a>
  </div>
  <div id="navbar" class="navbar-collapse collapse">
    <ul class="nav navbar-nav navbar-right">
      <li class="active"><a href="#">1</a></li>
      <li><a href="#">2</a></li>
      <li><a href="#">3</a></li>
    </ul>
  </div><!--/.nav-collapse -->
</div>
</nav>

Upvotes: 0

Views: 1799

Answers (2)

Oliver Baumann
Oliver Baumann

Reputation: 2289

You could add a state-variable on each page containing the pagename, and use that in your navbar to figure out which page is active. Consider the following structure:

In index.php:

<?php
$pageName = 'index'; 
// rest of template

In navbar.php:

<?php
$menuItems = ['index', '1', '2'];
?>
<div id="navbar" class="navbar-collapse collapse">
    <ul class="nav navbar-nav navbar-right">
      <?php foreach ($menuItems as $item): ?>
          <li class="<?= $pageName == $item ? 'active' : '' ?>"><a href="<?= $item ?>"><?= $item ?></a></li>
      <?php endforeach; ?>
    </ul>
</div>

As you use the include directive, all variables in an included file will share the scope of the file they are included in. That way, your navbar can access the $pageName variable defined in each of the separate pages.

It might miake sense to use a more sophisticated datastructure for the menu-items than just strings, so that you can have a different value for the href and the link-text.

Upvotes: 2

Roman Habibi
Roman Habibi

Reputation: 624

It is hard to see which scripts and when are loaded, since there is no php file in the question, the one is resetting active links,

Moreover document.ready does not guarantees that all resources are loaded, it is only meaning that the html document is loaded in order to wait for all content use onload

However your on click function will always be working if you attach it to the document, see snippet, you can inspect and see that it is working fine:

$(document).ready(function() {  

    $(document).on('click',".nav > li",function() {  
        $(".nav li").removeClass("active");
        $(this).addClass("active");
    });
    
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="navbar navbar-inverse navbar-static-top">
<div class="container">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" href="#">Project name</a>
  </div>
  <div id="navbar" class="navbar-collapse collapse">
    <ul class="nav navbar-nav navbar-right">
      <li class="active"><a href="index.php">1</a></li>
      <li><a href="#">2</a></li>
      <li><a href="#">3</a></li>
    </ul>
  </div><!--/.nav-collapse -->
</div>
</nav>

Upvotes: 0

Related Questions