Bootstrap . Nav-pills active

Question

I have the code, which by clicking another link opens the page and adds the class .active I have tried several scripts and nothing works.

<nav>
      <ul class="nav nav-pills float-right">
        <li class="nav-item">
          <a class="nav-link active" href="<?php echo Url::url_base(); ?>">Início</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="<?php echo Url::url_base(); ?>/about">Sobre</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="<?php echo Url::url_base(); ?>/error">Erro</a>
        </li>
      </ul>
    </nav>

When clicking on or in error, wanted to remove the class active of beginning and add to the clicked link. How to do?

$(document).on('click','.nav-link', function() {
			    $(this).closest('.nav-pills').find('.nav-link').removeClass('active');
			    $(this).addClass('active');
			    return true;
			});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>

<header class="header clearfix">
  <div class="container">
    <nav>
      <ul class="nav nav-pills float-right">
        <li class="nav-item">
          <a class="nav-link active" href="home">Início</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="about">Sobre</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="error">Erro</a>
        </li>
      </ul>
    </nav>
    <h3 class="text-muted">Title Brand</h3>
  </div>
</header>

He even switches but returns to class active pro Início. Someone give me a light?

Answer 1

Go through the elements 'li', remove classname 'active' from the previous, and set to the current.

$(document).on('click','.nav-link',function() {
    $(this).closest('.nav-pills').find('.nav-link').removeClass('active');
    $(this).addClass('active');
})

But if your browsing is refreshed, you will need to pass some parameter in the url to be identified on the other side and mark the related element as 'active'.

Making with php:

Suppose your url looks like this after clicking:

http://localhost/mvc/index.php? page=about

Would look like this:

<?php
$pg = $_GET['pagina'];
?>
<nav>
      <ul class="nav nav-pills float-right">
        <li class="nav-item">
          <a class="nav-link active" href="<?php echo Url::url_base(); ?>">Início</a>
        </li>
        <li class="nav-item">

          <a class="nav-link <?php if($pg == 'sobre') echo 'active' ?>" href="<?php echo Url::url_base(); ?>/about">Sobre</a>
        </li>
        <li class="nav-item">
          <a class="nav-link <?php if($pg == 'erro') echo 'active' ?>" href="<?php echo Url::url_base(); ?>/error">Erro</a>
        </li>
      </ul>
    </nav>