Bootstrap .nav-pills active

Question

Bootstrap .nav-pills active

Navigation

#1 by (1 votes)

1

I have the code, which when clicking another link opens the page and adds the class .active I have already 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 you click on or in error, you want to remove the active class from the home and add it 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>

It even changes but returns the class active pro Início . Someone gives me a light?

javascript html bootstrap-4

asked by anonymous 15.08.2017 / 16:43

1 answer

Replace Tag with php code Prevent Google indexing on specific folder [duplicate]

score 1 · Accepted Answer

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

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

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

Doing with php:

We assume your url looks like this after clicking:

link

It 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>