Bootstrap 3选项卡不起作用

时间：2016-12-06 15:24:34

标签： html5 css3 twitter-bootstrap-3

我正在使用Bootstrap 3中的Tabs来分隔网页上的相关信息。代码是：

＆＃13;
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

当页面加载并立即显示所有div时，我不确定原因。当单击其中一个选项卡时，它将开始仅显示相关的div。

我无法弄清楚为什么第二个和第三个没有被加载隐藏。

我正在使用bootstrap-3.3.7.js和jquery-1.11.3.min.js，我正在使用最新版本的Dreamweaver。

感谢您的帮助

2 个答案:

答案 0 :(得分：1)

似乎你缺少css和js（bootstrap以及jquery文件可能是。

＆＃13;
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

您在所有选项卡窗格上都有活动类，这使得它们在加载时都可见。从所有选项卡窗格中删除活动类，除了应该在加载时可见的那个。

＆＃13;
＆＃13; 
<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 ">
				  	<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 ">
				  	<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题