2

He visto por Internet unos ejemplos pero no me han funcionado de la manera que requiero, y es que cuando yo le de clic a el id de un href que es el mismo de un div me muestre la tabla que esta oculta.

CODIGO HTML

  <a href="#" id="display_table_students"> DB STUDENTS</a>
<br>
    <div id="display_table_students" style="display: block;">
                                    <table id="table_student" class="display" cellspacing="0" width="100%" style="display: none">
                                        <thead>
                                            <tr>
                                                <th>Nombre</th>
                                                <th>Apellido</th>
                                                <th>Correo</th>
                                                <th>Editar</th>
                                            </tr>
                                        </thead>
                                    </table>
                                </div> 

CODIGO JS

$('#display_table_students').click(function(e)
    {

      $("#formNewStudent").delay(100).fadeIn(100);
      $("#formUpdatePassword").delay(100).fadeIn(100);
      $("#formNewStudent").fadeOut(100);
      $("#formUpdatePassword").fadeOut(100);
      $('#register-form-link').removeClass('active');
      $('#login-form-link').removeClass('active');
      $(this).addClass('active');
      e.preventDefault();
    });

¿Que es lo que pasa? que tengo unos formularios con un pequeño efecto ej:

REGISTRAR ESTUDIANTES | ACTUALIZAR ESTUDIANTES |  DB STUDENTS <-(ESTOS SON LINKS)


Cada ves que oprimo un link se oculta uno y se muestra el otro con un formulario lo que deseo es cuando de click en el LINK DB STUDENTS se muestre la tabla a la cual le puse un style= 'none'ya que si le quito este atributo o estilo se me ve reflejada en todos los links.
En pocas palabras que unica y exclusivamente apenas de click en DB STUDENTS me aparezca la tabla oculta.
Espero me haya hecho entender y agradezco el interes.

5
  • porque usas .delay(100) si usas .fadeIn(100) el 100 es el delay del fadeIn
    – JuankGlezz
    el 14 feb. 2017 a las 20:13
  • perdona mi ignorancia @JuankGlezz eso afecta con mi problema?
    – JDavid
    el 14 feb. 2017 a las 20:17
  • no afecta, el delay es un retraso de la animación, el 100 de fadeIn es la duración de la animación, me confundí, disculpa
    – JuankGlezz
    el 14 feb. 2017 a las 20:23
  • Ok, entonces tomo ese comentario o respuesta como algo no constructivo ¿cierto?
    – JDavid
    el 14 feb. 2017 a las 20:25
  • como comentario
    – JuankGlezz
    el 14 feb. 2017 a las 20:36

2 respuestas 2

3

Cuida de los id duplicados, en html no deberían existir duplicados por este problema.

$('#display_table_students').click(function(e){
    e.preventDefault();

  $("#display_table_students").delay(1000).fadeIn(1000);
  $("#table_student").fadeIn(1000);
});

//ocultando el div con id display_table_students
$('#ocultar').click(function(e){
    e.preventDefault();

  $("#display_table_students").delay(1000).fadeOut(1000);
  $("#table_student").fadeOut(1000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" id="display_table_students"> DB STUDENTS</a>
<a href="#" id="ocultar"> ocultar</a>
<br>
<div id="display_table_students" style="display: block; border: 1px solid black;">
  <table id="table_student" class="display" cellspacing="0" width="100%" style="display: none">
    <thead>
      <tr>
        <th>Nombre</th>
        <th>Apellido</th>
        <th>Correo</th>
        <th>Editar</th>
      </tr>
    </thead>
  </table>
</div>

El usar id y este esta duplicado tiende a ocultar el primero que encuentra en este caso el enlace.

Ahora resolviendo tu caso seria algo así usando id unicos:

$('#display_table_students').click(function(e){
    e.preventDefault();
  $("#table_student").delay(100).fadeIn(100);
  $("#table_student2").fadeOut(100);
});

$('#display_table_students2').click(function(e){
    e.preventDefault();
  $("#table_student").fadeOut(100);
  $("#table_student2").delay(100).fadeIn(100);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" id="display_table_students"> DB STUDENTS</a>
<a href="#" id="display_table_students2"> DB STUDENTS2</a>
<br>
<div id="div_table_students" style="display: block; border: 1px solid black;">
  <table id="table_student" class="display" cellspacing="0" width="100%" style="display: none">
    <thead>
      <tr>
        <th>Nombre</th>
        <th>Apellido</th>
        <th>Correo</th>
        <th>Editar</th>
      </tr>
    </thead>
  </table>
  <table id="table_student2" class="display" cellspacing="0" width="100%" style="display: none">
    <thead>
      <tr>
        <th>Nombre2</th>
        <th>Apellido2</th>
        <th>Correo2</th>
        <th>Editar2</th>
      </tr>
    </thead>
  </table>
</div>

1

No uses id duplicidados, los id significan identificadores, trata de que estos sean identificadores unicos, si tienes dos contenedores que son similares mejor usa clases

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.