Different tab content showing in one tab,why?

Different tab content showing in one tab.after selecting a tab it works fine but on reload it shows same problem.
html code

<div class="container container1 content">
            <div class="col-md-12 col-md-offset-1" id="div-licence1">
                <div class="row" id="div-licence2">
                    <div class="col-lg-12">
                        <ul class="nav nav-tabs">
                            <li class="active"><a href="#upload_licence" id="upld_lic" data-toggle="tab" tabindex="upld_lic">Upload Licence</a></li>
                            <li><a href="#download_request" id="dwnld_req" data-toggle="tab">Download Request</a></li>
                          
                         
                        </ul>
                       <div class="tab-content">
                          
                            <div id="upload_licence" class="tab-pane fade-in active "> 
                                <form method="POST" action="../Database/action.php" enctype="multipart/form-data">                                                                                                                     
                                    <table cellpadding="5" class="table" id="tbl_upload_licence">
                                        <tr>
                                            <th>User</th>
                                            <th>Licence</th>
                                            <th>Action</th>                                                    
                                        </tr>                                    </table>                                                                            
                                </form>                                
                            </div> 
                            <div id="download_request" class="tab-pane fade-in active ">
                                <div class="row">
                                    <div class="col-md-12">
                                        <form method="POST" action="" enctype="multipart/form-data">        
                                            <table cellpadding="5" class="table" id="tbl_download_request">
                                                <tr>
                                                    <th><div class="col-md-4">User</div></th>
                                                    <th><div class="col-md-4">Request</div></th>
                                                    <th><div class="col-md-4">Action</div></th>
                                                </tr>
                                              </table>
                                        </form>
                                    </div>
                                </div> 
                            </div>

bootstrap.min.js
bootstrap.min.css

You have the ‘active’ class applied to both tabs! Remove one of those classes and the one with active applied will be the default one.

I assume you want the first one displayed by default so remove the active class from here.

<div id="download_request" class="tab-pane fade-in active ">

1 Like