0

Estoy tratando de crear un nav-tabs dentro de otro nav-tabs introducir la descripción de la imagen aquí

pero cuando intento cambiar de pagina en en segundo nav-tab este no cambia, solo se dejan de ver los datos de la page1 y abajo inmediatamente se muestran los de la page2

introducir la descripción de la imagen aquí

En este caso solo se muestran las letras de la page 3 hasta abajo

quisiera saber si alguien sabe como arreglar este error, estoy usando bootstrap 4 y este es de la manera en que lo estoy realizando

<div class="container">
    <h2>Product Categories</h2>
    <br>
    <!-- Nav tabs -->
    <ul class="nav nav-tabs" role="tablist">
        <li class="nav-item">
            <a style="font-size: 12px;" class="nav-link" data-toggle="tab" href="#home">Friction Products</a>
        </li>
        <li class="nav-item">
            <a style="font-size: 12px;" class="nav-link" data-toggle="tab" href="#menu1">Clutches</a>
        </li>
        <li class="nav-item">
            <a style="font-size: 12px;" class="nav-link" data-toggle="tab" href="#menu2">Safety</a>
        </li>
        <li class="nav-item">
            <a style="font-size: 12px;" class="nav-link" data-toggle="tab" href="#home">Production</a>
        </li>
        <li class="nav-item">
            <a style="font-size: 12px;" class="nav-link" data-toggle="tab" href="#menu1">Maintenance</a>
        </li>
        <li class="nav-item">
            <a style="font-size: 12px;" class="nav-link" data-toggle="tab" href="#menu2">Shear Brake</a>
        </li>
        <li class="nav-item">
            <a style="font-size: 12px;" class="nav-link" data-toggle="tab" href="#menu2">Press Controls</a>
        </li>
    </ul>

    <br>

    <div class="container">
        <!-- Nav tabs -->
        <ul class="nav nav-tabs" role="tablist">
            <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#page1">Page 1</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#page2">Page 2</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#page3">Page 3</a>
            </li>
        </ul>

        <div id="page1" class="container tab-pane fade"><br>
            <p>lkjasdhfalsdf</p>
        </div>

        <div id="page2" class="container tab-pane fade"><br>
            <p>shbflaksjdflk</p>
        </div>

        <div id="page3" class="container tab-pane fade"><br>
            <p>wertwertgfsd</p>
        </div>
    </div>
</div>

se que en los nombres de los nav se repiten varias veces, pero aun asi no se desaparecen los nav-tabs de page1 page2 y page3

1 respuesta 1

1

Te falto incluir el contenedor tab-content a los elementos div que difiniste para el contenido de cada page x.

Lo ajuste para el primer tab:

<div class="container">
<h2>Product Categories</h2>
<br>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
    <li class="nav-item">
        <a style="font-size: 12px;" class="nav-link" data-toggle="tab" href="#home">Friction Products</a>
    </li>
    <li class="nav-item">
        <a style="font-size: 12px;" class="nav-link" data-toggle="tab" href="#menu1">Clutches</a>
    </li>
    <li class="nav-item">
        <a style="font-size: 12px;" class="nav-link" data-toggle="tab" href="#menu2">Safety</a>
    </li>
    <li class="nav-item">
        <a style="font-size: 12px;" class="nav-link" data-toggle="tab" href="#home">Production</a>
    </li>
    <li class="nav-item">
        <a style="font-size: 12px;" class="nav-link" data-toggle="tab" href="#menu1">Maintenance</a>
    </li>
    <li class="nav-item">
        <a style="font-size: 12px;" class="nav-link" data-toggle="tab" href="#menu2">Shear Brake</a>
    </li>
    <li class="nav-item">
        <a style="font-size: 12px;" class="nav-link" data-toggle="tab" href="#menu2">Press Controls</a>
    </li>
</ul>

<br>

<div class="container">
    <!-- Tab panes -->
    <div class="tab-content">
        <div class="tab-pane active" id="home" role="tabpanel">
            <!-- Nav tabs -->
            <ul class="nav nav-tabs" role="tablist">
                <li class="nav-item">
                    <a class="nav-link" data-toggle="tab" href="#page1">Page 1</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-toggle="tab" href="#page2">Page 2</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-toggle="tab" href="#page3">Page 3</a>
                </li>
            </ul>

            <div class="tab-content">
                <div id="page1" class="tab-pane fade">
                    <p>lkjasdhfalsdf</p>
                </div>

                <div id="page2" class="tab-pane fade">
                    <p>shbflaksjdflk</p>
                </div>

                <div id="page3" class="tab-pane fade">
                    <p>wertwertgfsd</p>
                </div>
            </div>
        </div>
    </div>
</div>

JSFIDDLE

En este ENLACE esta el marcado de bootstrap que te puede ayudar a solucionar el problema también

Saludos!

1
  • Hola @Mariano , ahí coloque el código para la respuesta! De todas maneras, no entiendo los votos negativos ya que a pesar de que la respuesta original no fue la adecuada, soluciona el problema. Saludos Commented el 9 feb. 2018 a las 13:12

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.