2

Problema con Nav-Tabs

Buenas, tengo un problema con el nav-tabs de bootstrap, la cuestión es que seguí los ejemplos que están en la misma pagina para la creación de los nav-tabs y no se que problema puedo tener, como mira en tab "profile" muestra ese formulario, aquí por ejemplo tengo el formulario de perfil y su correspondiente nav-tab que muestra ese formulario.

introducir la descripción de la imagen aquí

Hasta este punto todo parece estar correcto, pero el problema surge a continuación, cuando al momento de dar click en el tab de "notificaciones" aparece lo siguiente:

introducir la descripción de la imagen aquí

Se me aparece el titulo que coloco para el otro nav que es "notificaciones" , no tengo idea que sucede, seguí los pasos y aun no puedo solucionar.

Mi código HTML

       <div class="col-xl-8 col-md-6">
           <div class="card">
              <div class="card-body">
              <ul class="nav nav-tabs" id="myTab" role="tablist">
                <li class="nav-item">
                  <a class="nav-link active" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" id="messages-tab" data-toggle="tab" href="#messages" role="tab" aria-controls="messages" aria-selected="false">Notificaciones</a>
                </li>
            </ul>

Código HTML Para llamar al Nav Perfil

<div class="tab-content py-4">
            <div class="tab-pane active" id="profile">
                <h4 class="m-y-2">Perfil de Usuario</h4>
                  <div class="tab-pane" id="">

Código HTML para llamar al nav Notificaciones

            <div class="tab-content py-4">
                        <div class="tab-pane active" id="messages">
                            <h4 class="m-y-2">Notificaciones</h4>
                              <div class="tab-pane" id="">
2
  • 1
    A riesgo de recalcar algo que parece evidente en tu código: ¿Los elementos .tab-pane los tienes en contenedores .tab-content distintos, o usas el mismo elemento .tab-content para poder los dos elementos .tab-pane? Commented el 15 nov. 2019 a las 15:27
  • Por favor revisa Cómo crear un ejemplo mínimo, completo y verificable para que podamos ayudarte de mejor manera. Commented el 17 nov. 2019 a las 3:27

1 respuesta 1

0

Amigo creo que tu problema es que tienes varios tab-pane active, solo deberia haber uno y los demas solo tab-pane, por otro lado no noto que estes cerrando donde debe ser los <div> a menos que solo sea por el recorte.

Adicional podrias revisar que estes cargando los js de boostrap y claro jquery que es requerido para funcionar correctamente.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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