2016-12-06 2 views
0

Я использую вкладки в Bootstrap 3, чтобы разделить соответствующую информацию на веб-странице. Код:Bootstrap 3 Вкладки не работают

<div class="tab-content"> 
 
    <div id="3users" class="tab-pane fade in active"> 
 
     <p class="price"><sup>$</sup>48.50<sub> /month</sub></p> 
 
     <ul> 
 
      <li>E-commerce Platform</li> 
 
      <li>Business Reporting</li> 
 
      <li>Event Booking</li> 
 
      <li>Custom Web Apps</li> 
 
     </ul> 
 
     <p class="emph">plus everthing included in WebMarketing</p> 
 
     <table width="75%" border="0"> 
 
      <tbody> 
 
       <tr> 
 
       <td>Users</td> 
 
       <td class="td-right">3</td> 
 
       </tr> 
 
       <tr> 
 
       <td>Emails</td> 
 
       <td class="td-right">10</td> 
 
       </tr> 
 
       <tr> 
 
       <td>Storage</td> 
 
       <td class="td-right">1GB</td> 
 
       </tr> 
 
       <tr> 
 
       <td>Bandwidth/Month</td> 
 
       <td class="td-right">1TB</td> 
 
       </tr> 
 
       <tr> 
 
       <td>Newsletters/Month</td> 
 
       <td class="td-right">10,000</td> 
 
       </tr> 
 
       <tr> 
 
       <td>SMS/Month</td> 
 
       <td class="td-right">10</td> 
 
       </tr> 
 
      </tbody> 
 
     </table> 
 
    </div> 
 
    <div id="5users" class="tab-pane fade in active"> 
 
     <p class="price"><sup>$</sup>73.50<sub> /month</sub></p> 
 
     <ul> 
 
      <li>E-commerce Platform</li> 
 
      <li>Business Reporting</li> 
 
      <li>Event Booking</li> 
 
      <li>Custom Web Apps</li> 
 
     </ul> 
 
     <p class="emph">plus everthing included in WebMarketing</p> 
 
     <table width="75%" border="0"> 
 
      <tbody> 
 
       <tr> 
 
       <td>Users</td> 
 
       <td class="td-right">5</td> 
 
       </tr> 
 
       <tr> 
 
       <td>Emails</td> 
 
       <td class="td-right">20</td> 
 
       </tr> 
 
       <tr> 
 
       <td>Storage</td> 
 
       <td class="td-right">2GB</td> 
 
       </tr> 
 
       <tr> 
 
       <td>Bandwidth/Month</td> 
 
       <td class="td-right">1TB</td> 
 
       </tr> 
 
       <tr> 
 
       <td>Newsletters/Month</td> 
 
       <td class="td-right">10,000</td> 
 
       </tr> 
 
       <tr> 
 
       <td>SMS/Month</td> 
 
       <td class="td-right">10</td> 
 
       </tr> 
 
      </tbody> 
 
     </table> 
 
    </div> 
 
    <div id="10users" class="tab-pane fade in active"> 
 
     <p class="price"><sup>$</sup>99.00<sub> /month</sub></p> 
 
     <ul> 
 
      <li>E-commerce Platform</li> 
 
      <li>Business Reporting</li> 
 
      <li>Event Booking</li> 
 
      <li>Custom Web Apps</li> 
 
     </ul> 
 
     <p class="emph">plus everthing included in WebMarketing</p> 
 
     <table width="75%" border="0"> 
 
      <tbody> 
 
       <tr> 
 
       <td>Users</td> 
 
       <td class="td-right">10</td> 
 
       </tr> 
 
       <tr> 
 
       <td>Emails</td> 
 
       <td class="td-right">50</td> 
 
       </tr> 
 
       <tr> 
 
       <td>Storage</td> 
 
       <td class="td-right">5GB</td> 
 
       </tr> 
 
       <tr> 
 
       <td>Bandwidth/Month</td> 
 
       <td class="td-right">1TB</td> 
 
       </tr> 
 
       <tr> 
 
       <td>Newsletters/Month</td> 
 
       <td class="td-right">10,000</td> 
 
       </tr> 
 
       <tr> 
 
       <td>SMS/Month</td> 
 
       <td class="td-right">10</td> 
 
       </tr> 
 
      </tbody> 
 
     </table> 
 
    </div> 
 
</div>

Я не знаю, почему, при загрузке страницы и отображает все дивы сразу. при нажатии одной из вкладок начинается отображение только соответствующего div.

Я не могу понять, почему 2-й и 3-й не скрываются при загрузке.

Я использую bootstrap-3.3.7.js и jquery-1.11.3.min.js, и я работаю с последней версией Dreamweaver.

Спасибо за помощь

ответ

0

У вас есть активный класс на всех закладках-панелей, что делает их все видимые при загрузке. удалите активный класс из всех вкладок, кроме одного, который должен быть видимым при загрузке.

<div class="tab-content"> 
 
\t \t \t \t <div id="3users" class="tab-pane fade in active"> 
 
\t \t \t \t \t <p class="price"><sup>$</sup>48.50<sub> /month</sub></p> 
 
\t \t \t \t \t <ul> 
 
\t \t \t \t \t \t <li>E-commerce Platform</li> 
 
\t \t \t \t \t \t <li>Business Reporting</li> 
 
\t \t \t \t \t \t <li>Event Booking</li> 
 
\t \t \t \t \t \t <li>Custom Web Apps</li> 
 
\t \t \t \t \t </ul> 
 
\t \t \t \t \t <p class="emph">plus everthing included in WebMarketing</p> 
 
\t \t \t \t \t <table width="75%" border="0"> 
 
\t \t \t \t \t \t <tbody> 
 
\t \t \t \t \t \t \t <tr> 
 
\t \t \t \t \t \t \t <td>Users</td> 
 
\t \t \t \t \t \t \t <td class="td-right">3</td> 
 
\t \t \t \t \t \t \t </tr> 
 
\t \t \t \t \t \t \t <tr> 
 
\t \t \t \t \t \t \t <td>Emails</td> 
 
\t \t \t \t \t \t \t <td class="td-right">10</td> 
 
\t \t \t \t \t \t \t </tr> 
 
\t \t \t \t \t \t \t <tr> 
 
\t \t \t \t \t \t \t <td>Storage</td> 
 
\t \t \t \t \t \t \t <td class="td-right">1GB</td> 
 
\t \t \t \t \t \t \t </tr> 
 
\t \t \t \t \t \t \t <tr> 
 
\t \t \t \t \t \t \t <td>Bandwidth/Month</td> 
 
\t \t \t \t \t \t \t <td class="td-right">1TB</td> 
 
\t \t \t \t \t \t \t </tr> 
 
\t \t \t \t \t \t \t <tr> 
 
\t \t \t \t \t \t \t <td>Newsletters/Month</td> 
 
\t \t \t \t \t \t \t <td class="td-right">10,000</td> 
 
\t \t \t \t \t \t \t </tr> 
 
\t \t \t \t \t \t \t <tr> 
 
\t \t \t \t \t \t \t <td>SMS/Month</td> 
 
\t \t \t \t \t \t \t <td class="td-right">10</td> 
 
\t \t \t \t \t \t \t </tr> 
 
\t \t \t \t \t \t </tbody> 
 
\t \t \t \t \t </table> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div id="5users" class="tab-pane fade in "> 
 
\t \t \t \t \t <p class="price"><sup>$</sup>73.50<sub> /month</sub></p> 
 
\t \t \t \t \t <ul> 
 
\t \t \t \t \t \t <li>E-commerce Platform</li> 
 
\t \t \t \t \t \t <li>Business Reporting</li> 
 
\t \t \t \t \t \t <li>Event Booking</li> 
 
\t \t \t \t \t \t <li>Custom Web Apps</li> 
 
\t \t \t \t \t </ul> 
 
\t \t \t \t \t <p class="emph">plus everthing included in WebMarketing</p> 
 
\t \t \t \t \t <table width="75%" border="0"> 
 
\t \t \t \t \t \t <tbody> 
 
\t \t \t \t \t \t \t <tr> 
 
\t \t \t \t \t \t \t <td>Users</td> 
 
\t \t \t \t \t \t \t <td class="td-right">5</td> 
 
\t \t \t \t \t \t \t </tr> 
 
\t \t \t \t \t \t \t <tr> 
 
\t \t \t \t \t \t \t <td>Emails</td> 
 
\t \t \t \t \t \t \t <td class="td-right">20</td> 
 
\t \t \t \t \t \t \t </tr> 
 
\t \t \t \t \t \t \t <tr> 
 
\t \t \t \t \t \t \t <td>Storage</td> 
 
\t \t \t \t \t \t \t <td class="td-right">2GB</td> 
 
\t \t \t \t \t \t \t </tr> 
 
\t \t \t \t \t \t \t <tr> 
 
\t \t \t \t \t \t \t <td>Bandwidth/Month</td> 
 
\t \t \t \t \t \t \t <td class="td-right">1TB</td> 
 
\t \t \t \t \t \t \t </tr> 
 
\t \t \t \t \t \t \t <tr> 
 
\t \t \t \t \t \t \t <td>Newsletters/Month</td> 
 
\t \t \t \t \t \t \t <td class="td-right">10,000</td> 
 
\t \t \t \t \t \t \t </tr> 
 
\t \t \t \t \t \t \t <tr> 
 
\t \t \t \t \t \t \t <td>SMS/Month</td> 
 
\t \t \t \t \t \t \t <td class="td-right">10</td> 
 
\t \t \t \t \t \t \t </tr> 
 
\t \t \t \t \t \t </tbody> 
 
\t \t \t \t \t </table> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div id="10users" class="tab-pane fade in "> 
 
\t \t \t \t \t <p class="price"><sup>$</sup>99.00<sub> /month</sub></p> 
 
\t \t \t \t \t <ul> 
 
\t \t \t \t \t \t <li>E-commerce Platform</li> 
 
\t \t \t \t \t \t <li>Business Reporting</li> 
 
\t \t \t \t \t \t <li>Event Booking</li> 
 
\t \t \t \t \t \t <li>Custom Web Apps</li> 
 
\t \t \t \t \t </ul> 
 
\t \t \t \t \t <p class="emph">plus everthing included in WebMarketing</p> 
 
\t \t \t \t \t <table width="75%" border="0"> 
 
\t \t \t \t \t \t <tbody> 
 
\t \t \t \t \t \t \t <tr> 
 
\t \t \t \t \t \t \t <td>Users</td> 
 
\t \t \t \t \t \t \t <td class="td-right">10</td> 
 
\t \t \t \t \t \t \t </tr> 
 
\t \t \t \t \t \t \t <tr> 
 
\t \t \t \t \t \t \t <td>Emails</td> 
 
\t \t \t \t \t \t \t <td class="td-right">50</td> 
 
\t \t \t \t \t \t \t </tr> 
 
\t \t \t \t \t \t \t <tr> 
 
\t \t \t \t \t \t \t <td>Storage</td> 
 
\t \t \t \t \t \t \t <td class="td-right">5GB</td> 
 
\t \t \t \t \t \t \t </tr> 
 
\t \t \t \t \t \t \t <tr> 
 
\t \t \t \t \t \t \t <td>Bandwidth/Month</td> 
 
\t \t \t \t \t \t \t <td class="td-right">1TB</td> 
 
\t \t \t \t \t \t \t </tr> 
 
\t \t \t \t \t \t \t <tr> 
 
\t \t \t \t \t \t \t <td>Newsletters/Month</td> 
 
\t \t \t \t \t \t \t <td class="td-right">10,000</td> 
 
\t \t \t \t \t \t \t </tr> 
 
\t \t \t \t \t \t \t <tr> 
 
\t \t \t \t \t \t \t <td>SMS/Month</td> 
 
\t \t \t \t \t \t \t <td class="td-right">10</td> 
 
\t \t \t \t \t \t \t </tr> 
 
\t \t \t \t \t \t </tbody> 
 
\t \t \t \t \t </table> 
 
\t \t \t \t </div> 
 
\t \t \t </div>

1

кажется вам не хватает CSS и JS (загрузился, а также JQuery файл может быть.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<ul class="nav nav-tabs"> 
 
    <li class="active"><a data-toggle="tab" href="#3users">3 Users</a></li> 
 
    <li><a data-toggle="tab" href="#5users">5users</a></li> 
 
    <li><a data-toggle="tab" href="#10users">10users</a></li> 
 
</ul> 
 
<div class="tab-content"> 
 
    <div id="3users" class="tab-pane fade in active "> 
 
    <p class="price"><sup>$</sup>48.50<sub> /month</sub></p> 
 
    <ul> 
 
     <li>E-commerce Platform</li> 
 
     <li>Business Reporting</li> 
 
     <li>Event Booking</li> 
 
     <li>Custom Web Apps</li> 
 
    </ul> 
 
    <p class="emph">plus everthing included in WebMarketing</p> 
 
    <table width="75%" border="0"> 
 
     <tbody> 
 
     <tr> 
 
      <td>Users</td> 
 
      <td class="td-right">3</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Emails</td> 
 
      <td class="td-right">10</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Storage</td> 
 
      <td class="td-right">1GB</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Bandwidth/Month</td> 
 
      <td class="td-right">1TB</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Newsletters/Month</td> 
 
      <td class="td-right">10,000</td> 
 
     </tr> 
 
     <tr> 
 
      <td>SMS/Month</td> 
 
      <td class="td-right">10</td> 
 
     </tr> 
 
     </tbody> 
 
    </table> 
 
    </div> 
 
    <div id="5users" class="tab-pane fade "> 
 
    <p class="price"><sup>$</sup>73.50<sub> /month</sub></p> 
 
    <ul> 
 
     <li>E-commerce Platform</li> 
 
     <li>Business Reporting</li> 
 
     <li>Event Booking</li> 
 
     <li>Custom Web Apps</li> 
 
    </ul> 
 
    <p class="emph">plus everthing included in WebMarketing</p> 
 
    <table width="75%" border="0"> 
 
     <tbody> 
 
     <tr> 
 
      <td>Users</td> 
 
      <td class="td-right">5</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Emails</td> 
 
      <td class="td-right">20</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Storage</td> 
 
      <td class="td-right">2GB</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Bandwidth/Month</td> 
 
      <td class="td-right">1TB</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Newsletters/Month</td> 
 
      <td class="td-right">10,000</td> 
 
     </tr> 
 
     <tr> 
 
      <td>SMS/Month</td> 
 
      <td class="td-right">10</td> 
 
     </tr> 
 
     </tbody> 
 
    </table> 
 
    </div> 
 
    <div id="10users" class="tab-pane fade "> 
 
    <p class="price"><sup>$</sup>99.00<sub> /month</sub></p> 
 
    <ul> 
 
     <li>E-commerce Platform</li> 
 
     <li>Business Reporting</li> 
 
     <li>Event Booking</li> 
 
     <li>Custom Web Apps</li> 
 
    </ul> 
 
    <p class="emph">plus everthing included in WebMarketing</p> 
 
    <table width="75%" border="0"> 
 
     <tbody> 
 
     <tr> 
 
      <td>Users</td> 
 
      <td class="td-right">10</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Emails</td> 
 
      <td class="td-right">50</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Storage</td> 
 
      <td class="td-right">5GB</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Bandwidth/Month</td> 
 
      <td class="td-right">1TB</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Newsletters/Month</td> 
 
      <td class="td-right">10,000</td> 
 
     </tr> 
 
     <tr> 
 
      <td>SMS/Month</td> 
 
      <td class="td-right">10</td> 
 
     </tr> 
 
     </tbody> 
 
    </table> 
 
    </div> 
 
</div>

Смежные вопросы