1

estoy haciendo un ejercicio que me pide una página web con 2 pestañas utilizando Bootstrap además de HTML. Tengo este código HTML (lo pongo desde la etiqueta body porque no me deja poner más):

<body>

    <div class="container">

        <div class="jumbotron">
            <h1 class="display-4">Atención</h1>
            <p class="lead">Esta página es solo una prueba de Bootstrap</p>
            <hr class="my-4">
        </div>

        <ul class="nav nav-tabs">
            <li class="nav-item">
                <a class="nav-link active" data-toggle="tab" href="#pestaña-uno">Pestaña 1</a>
            </li>  

            <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#pestaña-dos">Pestaña 2</a>
            </li>
        </ul>  

        <div class="tab-content">
            <div class="tab-pane container active" id="pestaña-uno">         
                <h1>Este es el contenido de la pestaña 1</h1>
            </div>

            <div class="tab-pane container fade" id="pestaña-dos">
                    <h1>Este es el contenido de la pestaña 2</h1>
            </div>
        </div>   

    </div>         





    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH8abtTE1Pi6jizo" crossorigin="anonymous"></script>

    <script src=https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js integrity="sha384UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> 
</body>

La cuestión es que no me muestra nada al pinchar en "Pestaña 2", como que no navega de una pestaña a otra, y me muestra el contenido de las 2 pestañas en la "Pestaña 1". ¿Alguien sabe por qué y cómo lo puedo solucionar?

2 respuestas 2

5

Tienes varios errores

  • el primero es que estas asignando los dos tabs como active, debes quitar uno para que se puedan mostrar correctamente.
  • lo segundo, es que estabas envolviendo los tab-pane en tab-container, cuando en realidad solo necesitas uno el cual envuelve todos los tab-pane
  • tercero, ten cuidado con el script, tienes uno que no esta con las comillas

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
    
    <div class="container">
      <ul class="nav nav-tabs">
        <li class="active">
            <a href="javascript:void(0)" data-toggle="tab" data-target="#pestaña1">Pestaña 1</a>
        </li>  

        <li>
            <a href="javascript:void(0)" data-toggle="tab" data-target="#pestaña2">Pestaña 2</a>
        </li>
    </ul>  

    <div class="tab-content">
        <div class="tab-pane active" id="pestaña1">         
            <h1>Este es el contenido de la pestaña 1</h1>
        </div>

      <div class="tab-pane" id="pestaña2">
                <h1>Este es el contenido de la pestaña 2</h1>
            </div>          
</div>

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>

Nos cuentas como te va :)

2
  • lo acabo de probar y nada, acabo de subir el código con esos cambios Commented el 17 oct. 2019 a las 16:17
  • @AitorOrtega Tienes razon, no solo era eso.. la acabo de editar! Commented el 17 oct. 2019 a las 16:25
-1

Observo dos cositas. 1. No uses Ñ para referenciar clases o id. 2. no incluiste el CDN de Bootsrap https://getbootstrap.com/docs/4.0/getting-started/introduction/

checa el script

   <body>

<div class="container">

    <div class="jumbotron">
        <h1 class="display-4">Atención</h1>
        <p class="lead">Esta página es solo una prueba de Bootstrap</p>
        <hr class="my-4">
    </div>

    <ul class="nav nav-tabs">
        <li class="nav-item">
            <a class="nav-link active" data-toggle="tab" href="#pestaa-uno">Pestaña 1</a>
        </li>  

        <li class="nav-item">
            <a class="nav-link" data-toggle="tab" href="#pestaa-dos">Pestaña 2</a>
        </li>
    </ul>  

    <div class="tab-content">
        <div class="tab-pane container active" id="pestaa-uno">         
            <h1>Este es el contenido de la pestaña 1</h1>
        </div>

        <div class="tab-pane container fade" id="pestaa-dos">
                <h1>Este es el contenido de la pestaña 2</h1>
        </div>
    </div>   

</div>         

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH8abtTE1Pi6jizo" crossorigin="anonymous"></script>

<script src=https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js integrity="sha384UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> 

2
  • 1
    Puede ser que la parte del código donde se visualiza el CDN lo haya omitido
    – user128299
    Commented el 17 oct. 2019 a las 16:40
  • 2
    Esta respuesta es incorrecta. El uso de la letra Ñ en las clases o IDs no implica error de ejecución. El OP está incluyendo las CDNs de Bootstrap en su código. Por favor revisa ¿Cómo escribo una buena respuesta? Commented el 18 oct. 2019 a las 14:02

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.