初期ページの読み込み両方のタブの内容を表示します

Question

最初の読み込み時に、タブが最初にクリックされたときに両方のタブの内容が最初に表示されます。

これはなぜ起こっているのですか？

は、ここでどちらあなたのタブ（#subscriptionManagementと#locationManagement）

<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

が、彼らは両方とも、デフォルトでアクティブになっている意味、activeクラスを持っている私のhtmlです。このクラスは、ナビゲーションに追加されるべきであり、コンテンツが表示されるべきであることを示します。あなたは、単にあなたが最初のロードに表示したくないタブから、このクラスを削除する必要があります。

変更：

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

へ：このことができます

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

願っています！ :)