nav-tabs within other nav-tabs

Navigation
0

I'm trying to create a nav-tabs within other nav-tabs  

but when I try to change the page in the second nav-tab it does not change, only the data on page1 is left and immediately those on page2 are displayed

In this case only the letters from page 3 to below are displayed

I would like to know if anyone knows how to fix this error, I am using bootstrap 4 and this is the way I am doing it 

<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>

I know that the names of the nav are repeated several times, but even so the nav-tabs of page1 page2 and page3 do not disappear

    
asked by cesg.dav 09.02.2018 в 02:42
source

1 answer

1

You have to include the container tab-content to the div elements that you defined for the content of each page x.

I adjust it for the first 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

In this LINK is the bootstrap markup that can help you solve the problem as well

Greetings!

    
answered by 09.02.2018 в 03:12
Save file inside a shared folder of a server How to create a height limit of a page with CSS