2016-12-06 102 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的一次。当其中一个选项卡被点击时,它开始只显示相关的div。

我不明白为什么第二个和第三个没有被隐藏在负载上。

我使用的是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

看来你缺少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>

相关问题