Estoy teniendo problemas con la alternancia «activo» de la clase, mi problema es un poco diferente de los demás, porque yo ya busqué preguntas similares. Va a ser mejor si se lo explico en el código.

Aquí es index.php:

<?php 
include("module/navbar.html");
?>

<div class="container">
    <div class="row-fluid">
        <div class="span3">
            <div class="well sidebar-nav">
            <ul class="nav nav-list">
              <li class="nav-header">Personal</li>
              <li class="active"><a href="javascript:void(0);" onclick="profile();">Profile</a></li>
              <li><a href="javascript:void(0);" onclick="my_settings();">Settings</a></li>
              <li><a href="javascript:void(0);" onclick="achievements();">Achievements</a></li>
              <li><a href="javascript:void(0);" onclick="last_results();">Results</a></li>
            </ul>
            </div>
        </div>

        <div class="span9">
            <p> Here is the index.php content </p>
        </div>
    </div>
</div>

Como se puede ver hay dos pestañas, la primera es la parte superior del menú que se incluye por navbar.html y la segunda es la que está en la clase de contenedor. Cuando hago clic en por ejemplo «Perfil» solo carga el contenido de la profile.php se hace este script

function profile(object){

            $(".span9").html(ajax_load)
            .load("module/profile.php")
            .hide()
            .fadeIn("slow");
}

Sólo cambia el contenido de span9 a los contenidos de profile.php. Similar a la de otros (ajustes, etc). El punto principal es que cuando hago clic en ellos funciona perfecto, el «activo» de la clase de los cambios automáticamente, por la manera en que yo estoy usando este tipo de secuencia de comandos para cambiar «activo» de la clase:

<script type="text/javascript">
   $(".nav-list li").on("click", function() {
  $(".nav-list li").removeClass("active");
  $(this).addClass("active");
});
</script>

Y aquí está el problema. Este es navbar.html:

<div class="nav-collapse">
        <ul class="nav nav-menu">
          <li class="active"><a href="index.php">Main page</a></li>
          <li><a href="javascript:void(0);" onclick="grades();">Grades</a></li>
          <li><a href="javascript:void(0);" onclick="attendance();">Attendance</a></li>
          <li><a href="javascript:void(0);" onclick="exams();">Exams</a></li>
          <li><a href="javascript:void(0);" onclick="kbo_result();">Olympiads</a></li>
        </ul>
</div>

Cuando hago clic en «Exámenes», el contenido de la fila-líquido debe ser cambiado a los contenidos de exams.php como he cambiado el contenido de span9. Aquí está la secuencia de comandos:

function exams(object){

            $(".row-fluid").html(ajax_load)
            .load("module/exams.php")
            .hide()
            .fadeIn("slow");

}

Todo funcionó de maravilla, los contenidos han cambiado, entonces, cuando hago clic en los menús en exams.php mi script no funciona, sólo que no de intercambio o de cambio de estado «activo» de la clase, entre li. Aquí está el exams.php:

<div class="row-fluid">
    <div class="span3">
      <div class="well sidebar-nav">
        <ul class="nav nav-list">
          <li class="nav-header">PBT Exams</li>
          <li class="active"><a href="#">1</a></li>
          <li><a href="#">2</a></li>
          <li><a href="#">3</a></li>
          <li><a href="#">4</a></li>
          <li><a href="#">5</a></li>
          <li><a href="#">6</a></li>
        </ul>
      </div>
    </div>

    <div class="span9">
        <p> Here is the exam.php content </p>
    </div>
</div>

No sé qué podría ser el problema»,» activo » de la clase que se queda en el #1, y no cambia. Quién puede responder por favor, estaré muy agradecido.

InformationsquelleAutor user3551344 | 2014-07-08

1 Comentario

  1. 10

    Uso jquery delegado del sistema (para jQuery >= 1.7: http://api.jquery.com/on/)

    Usted tiene algunos de los insumos y de los manipuladores que están enlazadas a él. Si cambia árbol DOM y retire el elemento, los eventos no se planteó de nuevo.

    Solución:

    <script type="text/javascript">
       $(document).on('click', '.nav-list li', function() {
           $(".nav-list li").removeClass("active");
           $(this).addClass("active");
       });
    </script>

    ¿Qué pasa ahora? Cuando usted haga clic en «li» elemento», un evento (tipo === ‘haga clic en’) se activará y se movió hacia arriba en el árbol DOM. Aún no se unen directamente haga clic en controlador sobre el elemento de destino por clase/id/selector de atributo, «documento» (sí, jquery, por supuesto) se captura el evento, y el proceso de controlador que se unen.

    • Genial!!! Muchas gracias!

Dejar respuesta

Please enter your comment!
Please enter your name here