locked
All tabs other than the first tab do not display information (bootstrap 4.2.1) RRS feed

  • Question

  • User-1548796982 posted

    hi

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
    
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
    
    
        <ul class="nav nav-tabs">
          <li class='nav-item'>
            <a class='nav-link active' data-toggle='tab' href='#s1'>12</a>
          </li>
          <li class='nav-item'>
            <a class='nav-link ' data-toggle='tab' href='#s2'>13</a>
           </li>
           <li class='nav-item'>
             <a class='nav-link ' data-toggle='tab' href='#s3'>16</a>
           </li>
           <li class='nav-item'>
             <a class='nav-link ' data-toggle='tab' href='#s4'>17</a>
           </li>
           <li class='nav-item'>
             <a class='nav-link ' data-toggle='tab' href='#s5'>18</a>
           </li><li class='nav-item'>
             <a class='nav-link ' data-toggle='tab' href='#s6'>19</a>
           </li>    
         </ul>
    
         <!-- Tab panes -->
           <div class="tab-content">
             <div class='tab-pane container fade in show active' id='s1'>1</div>
             <div class='tab-pane container fade' id='s2'>2</div>
             <div class='tab-pane container fade' id='s3'>3</div>
             <div class='tab-pane container fade' id='s4'>4</div>
             <div class='tab-pane container fade' id='s5'>5</div>
             <div class='tab-pane container fade' id='s6'>6</div>    
           </div>

    i use this code for tabs in bootstrap 4.2.1

    it work correctly in jsfiddle.net but not work in my project why?

    main tab show data But when I click on other tabs, its contents will not be displayed

    Friday, January 18, 2019 9:27 AM

All replies

  • User475983607 posted

    I'm unable to reproduce this issue.  

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">   
    </head>
    <body>
    
        <ul class="nav nav-tabs">
            <li class='nav-item'>
                <a class='nav-link active' data-toggle='tab' href='#s1'>12</a>
            </li>
            <li class='nav-item'>
                <a class='nav-link ' data-toggle='tab' href='#s2'>13</a>
            </li>
            <li class='nav-item'>
                <a class='nav-link ' data-toggle='tab' href='#s3'>16</a>
            </li>
            <li class='nav-item'>
                <a class='nav-link ' data-toggle='tab' href='#s4'>17</a>
            </li>
            <li class='nav-item'>
                <a class='nav-link ' data-toggle='tab' href='#s5'>18</a>
            </li>
            <li class='nav-item'>
                <a class='nav-link ' data-toggle='tab' href='#s6'>19</a>
            </li>
        </ul>
    
        <!-- Tab panes -->
        <div class="tab-content">
            <div class='tab-pane container fade in show active' id='s1'>1</div>
            <div class='tab-pane container fade' id='s2'>2</div>
            <div class='tab-pane container fade' id='s3'>3</div>
            <div class='tab-pane container fade' id='s4'>4</div>
            <div class='tab-pane container fade' id='s5'>5</div>
            <div class='tab-pane container fade' id='s6'>6</div>
        </div>
    
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
    
    </body>
    </html>

    Please post all the relevant code.

    Friday, January 18, 2019 1:51 PM
  • User839733648 posted

    Hi tadbirgaran,

    According to your description and code, I've tested on my side but could not reproduce your issue.

    I've tested the code on Chrome, Edge and IE. You couls see from the screenshot that it all works well. 

    I want to ask that if you've added other codes that maybe affect this and which browser and its version you've used.

    Best Regards,

    Jenifer

    Tuesday, January 22, 2019 2:00 AM
  • User-857013053 posted

    According to my suggestion you just use bootstrap tab class. It directly allow functionality according to your question.

    EX:
    <a data-toggle="tab" href="#home">Home</a>
    <a data-toggle="tab" href="#menu1">Menu 1</a>
    <a data-toggle="tab" href="#menu2">Menu 2</a>
    <div class="tab-content">
    <div id="home" class="tab-pane fade in active">
    <h3>HOME</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <div id="menu1" class="tab-pane fade">
    <h3>Menu 1</h3>
    <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
    </div>

    Wednesday, April 3, 2019 4:48 AM