2016-12-06 15 views
0

私は、ブートストラップ3のタブを使用して、ウェブページ上の関連情報を区切ります。コードは次のとおりです。ブートストラップ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要素のすべてを一度確認していません。タブの1つをクリックすると、関連するdivのみが表示されます。

2番目と3番目がなぜ読み込まれていないのかわかりません。

私はbootstrap-3.3.7.jsjquery-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

(だけでなく、jqueryのファイルをブートストラップかもしれあなたは、CSSやJSが欠落しているようだ。

<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>

関連する問題