Activate - disable class active of a nav-item with bootstrap 4

Question

Activate - disable class active of a nav-item with bootstrap 4

Navigation

#1 by (2 votes)
#2 by (0 votes)

1

Greetings I would like to know if it is possible to activate the active class according to where you click, I tried with some script that I found on the web but they have not worked for me.

The way I am doing it is: I have a php file where I make the call of another php file that is where I have the nav-bar.

File that is called in this case this file is called generatepedido.php

<?php
    include('../funciones/functions.php');

    if (!isLoggedIn()) {
        $_SESSION['msg'] = "Debes iniciar sesión primero";
        header('location: ../login.php');
    }
?>
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Generador de Pedido</title>
    <link rel="shortcut icon" href="../images/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
        <!-- Bootstrap core CSS -->
        <!--link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet"-->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>


    <!-- Custom styles for this template -->
    <link href="css/logo-nav.css" rel="stylesheet">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">

</head>
<body>
<?php include("includes/head.php"); ?>
<?php echo 'Bienvenido ' .$_SESSION['user']['nombre']; ?>

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>


<?php include("includes/footer.php"); ?>   

</body>
</html>>

And this other is the file head.php As you can see at the end I have included one of the many script on which I have tried to deactivate the class active to where it was originally and activate it in where you click.

<!-- Navigation -->
    <nav class="navbar navbar-expand-lg navbar-light fixed-top" style="background-color:  #cca700;">
      <div class="container">
        <a class="navbar-brand" href="index.php">
          <img src="https://local.jesuministrosymas.com.ve/image/LOGO.png" width="180" height="30" alt="">
        </a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarResponsive">
          <ul class="navbar-nav ml-auto">
            <li class="nav-item active">
              <a class="nav-link" href="index.php"><i class="fas fa-home fa-fw"></i> Inicio
                <span class="sr-only">(current)</span>
              </a>
            </li>
            <li class="nav-item">
              <a  class="nav-link" href="generarpedido.php"><i class="fas fa-cart-arrow-down fa-fw"></i> Generar Pedido</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#"><i class="fas fa-money-bill-alt fa-fw"></i> Pagos</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#"><i class="fas fa-envelope fa-fw"></i> Contactenos</a>
            </li>
            <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <i class="fa fa-cogs fa-fw"></i>  Ajustes
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#"><i class="fa fa-address-card fa-fw"></i> Perfil</a>
          <a class="dropdown-item" href="#"><i class="fa fa-history fa-fw"></i> Historial</a>
          <div class="dropdown-divider"></div>
          <a class="nav-link" href="../index.php?logout='1'"><i class="fas fa-sign-out-alt"></i>

 Salir</a>
        </div>
      </li>

          </ul>
        </div>
      </div>
    </nav>

<script>
$('li.nav-item').click(function(){
    $('li.nav-item').removeClass("active");
    $(this).addClass("active");
});
</script>

javascript html php bootstrap bootstrap-4

asked by Jose M Herrera V 24.08.2018 в 15:57

source

2 answers

I can not modify table record using EF How do I clean the html tags of a string?

score 2 · Answer 1

I should serve you something like this

$('li a').click(function(e) {
        //e.preventDefault();
        var $this = $(this);
        $this.closest('ul').find('li.active,a.active').removeClass('active');
        $this.addClass('active');
        $this.parent().addClass('active');

    });

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css">
<!-- Navigation -->
    <nav class="navbar navbar-expand-lg navbar-light fixed-top" style="background-color:#cca700;">
      <div class="container">
        <a class="navbar-brand" href="#">
          <img src="https://local.jesuministrosymas.com.ve/image/LOGO.png" width="180" height="30" alt="">
        </a>
        <button type="button" class="navbar-toggler collapsed" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarResponsive">
          <ul class="navbar-nav ml-auto">
            <li class="nav-item active">
              <a class="nav-link" href="#"><i class="fas fa-home fa-fw"></i> Inicio
                <span class="sr-only">(current)</span>
              </a>
            </li>
            <li class="nav-item">
              <a  class="nav-link" href="#"><i class="fas fa-cart-arrow-down fa-fw"></i> Generar Pedido</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#"><i class="fas fa-money-bill-alt fa-fw"></i> Pagos</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#"><i class="fas fa-envelope fa-fw"></i> Contactenos</a>
            </li>
            <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <i class="fa fa-cogs fa-fw"></i>  Ajustes
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#"><i class="fa fa-address-card fa-fw"></i> Perfil</a>
          <a class="dropdown-item" href="#"><i class="fa fa-history fa-fw"></i> Historial</a>
          <div class="dropdown-divider"></div>
          <a class="nav-link" href="../index.php?logout='1'"><i class="fas fa-sign-out-alt"></i>

 Salir</a>
        </div>
      </li>

          </ul>
        </div>
      </div>
    </nav>
    
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/js/bootstrap.js"></script>

As good programming practices it is advisable to insert the css in the head of your page and the script at the end (before </body> ) for a better optimization of our page and / or web system ; Now, there are different points of view according to the mentioned but it is another matter.

As for what you mention about the links, you should only comment on the line that says e.preventDefault() , which is a way to prevent behavior when performing an action, that this case is a click on the link

Now, if it is not a requirement for you that a link is active by default, you could also use this:

$('li a').click(function(e) {
   //e.preventDefault();
   $('a').removeClass('active');
   $(this).addClass('active');
});

You told us =)

score 0 · Answer 2

In a simple way it would be:

//  JAVASCRIPT

$('li').on('click',function(e){ 
  $(this).parent().find('li.active').removeClass('active'); 
  $(this).addClass('active');  
});

/* CSS */

.active{
  background: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- HTML -->

<div class="container">
  <div class="row">
    <p>De click en cualquier Item</p>
    <ul>
      <li class="active"><a href="#"></a>Item 1</li>
      <li class=""><a href="#"></a>Item 2</li>
      <li class=""><a href="#"></a>Item 3</li>
      <li class=""><a href="#"></a>Item 4</li>
    </ul>    
  </div>
</div>