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 el 17 oct. 2019 a las 16:17
  • @AitorOrtega Tienes razon, no solo era eso.. la acabo de editar! 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
    – BetaM
    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? el 18 oct. 2019 a las 14:02

Tu Respuesta

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

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