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

【问题标题】：Initial Page Load Shows contents of both tabs初始页面加载显示两个选项卡的内容
【发布时间】：2017-04-27 10:44:31
【问题描述】：

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

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

这是我的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>

【问题讨论】：

标签： html twitter-bootstrap

【解决方案1】：

您的两个选项卡（#subscriptionManagement 和 #locationManagement）都有 active 类，这意味着它们都默认处于活动状态。应该在导航中添加此类，表明应该显示内容。您只需从您不想在初始加载时显示的选项卡中删除此类：

变化：

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

收件人：

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

希望这会有所帮助！ :)

【讨论】：