Estoy tratando de establecer clases 'activas' en los elementos de navegación de la lista al hacer clic. Sin embargo, el add/removeclass se ejecuta antes de que se cargue la nueva página, por lo que establece la clase active de nuevo en el elemento de lista index.php. ¿No se supone que la función document.ready debe ejecutarse después de que el documento haya terminado de cargarse?

Aclaraciones: Todos los archivos php utilizan los mismos elementos de "barra de navegación". Los archivos php están en el mismo nivel de directorio.

$(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>
0
LeggoMaEggo 12 nov. 2017 a las 04:03

2 respuestas

La mejor respuesta

Puede agregar una variable de estado en cada página que contenga el nombre de la página y usarla en su barra de navegación para averiguar qué página está activa. Considere la siguiente estructura:

En index.php:

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

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

Mientras usa la directiva include, todas las variables en un archivo incluido compartirán el alcance del archivo en el que están incluidas. De esa manera, su barra de navegación puede acceder a la variable $pageName definida en cada una de las páginas separadas .

Puede tener sentido usar una estructura de datos más sofisticada para los elementos del menú que solo cadenas, de modo que pueda tener un valor diferente para href y el texto del enlace.

1
Oliver Baumann 12 nov. 2017 a las 14:04

Es difícil ver qué scripts y cuándo se cargan, ya que no hay un archivo php en la pregunta, el que está restableciendo los enlaces activos,

Además document.ready no garantiza que se carguen todos los recursos, solo significa que el documento html se carga para esperar a que se use todo el contenido onload

Sin embargo, su función al hacer clic siempre estará funcionando si la adjunta al documento, vea el fragmento, puede inspeccionar y ver que está funcionando bien:

$(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>
0
Roman Habibi 12 nov. 2017 a las 01:28