初始页面加载显示两个选项卡的内容

Question

在初始加载时，两个选项卡中的内容都显示在网页上，一旦第一次单击该选项卡，它们就会按预期工作。

为什么会发生这种情况的任何想法？

这里是我的html

<div id="userFunctions" style="display: none;" > 
    <h2 id="welcome"></h2> 
    <button id="btnChangeUser" class="btn btn-primary" style="display: none;">Change User</button> 
    <br> 
    <hr> 
    <ul class="nav nav-tabs"> 
     <li class="active"><a id="showSubs" data-toggle="tab" href="#subscriptionManagement">Subscription Portal</a></li> 
     <li><a id="showLocation" data-toggle="tab" href="#locationManagement">Location Management</a></li> 
    </ul> 
    <div class = tab-content> 
     <div id="subscriptionManagement" class="tab-pane fade in active"> 
     <hr> 
     <section id="sendSubRequest"> 
      <h4>Request Subscription</h4> 
      <div class="input-group"> 
       <input type="text" id="subUserName" class="form-control "></input> 
       <span class="input-group-btn"> 
       <button id="btnSubUser" class="btn btn-primary">Subscribe</button> 
       </span> 
      </div> 
     </section> 
     <br> 
     <section id="ReviewSubRequests"> 
      <h4>Incoming Request(s)</h4> 
      <ul id='subscriptionsList'> 
      </ul> 
     </section> 
     </div> 
     <div id="locationManagement" class="tab-pane fade in active"> 
     <hr> 
     <section id="cityDetails"> 
      <section id="map"> 
      </section> 
      <br> 
      <section> 
       <button id="btncheckInLocation" class="btn btn-primary">Check-In User location</button> 
      </section> 
     </section> 
     <section id="friendsList"> 
      <h4>Subscribed Friends</h4> 
      <ul id='subscribedUsers'> 
      </ul> 
     </section> 
     </div> 
    </div> 
</div> 

Answer 1

两个标签页（#subscriptionManagement和#locationManagement）有active类，这意味着它们都被激活了。这个类应该在导航上添加，表示应该显示内容。您只需从您不希望显示在初始加载选项卡中删除这个类：

变化：

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

要：

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

希望这有助于！ :)