javascript - 单击时 Bootstrap 选项卡不起作用

Question

我正在为网站使用 bootstrap 并使用它带来的选项卡功能。我查看了文档，我相信我做的一切都是正确的。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<section id="works" class="ptb-80 bb-1">
  <div class="container">
    <div class="text-center">
      <h2>How It Works?</h2>
      <div class="seperator"></div>
    </div>
    <div class="tabbable full-width-tabs">
      <div class="tab-content">
        <div class="tab-pane active" id="tab-one">
          <div class="row">
            <div class="col-md-5 col-xs-12">
              <img src="images/step-1.png" class="img-responsive" alt="">
            </div>
            <div class="col-md-7 col-xs-12 ptb-40">
              <div class="main-content p-20">
                <h3><span>Build Your Own</span><br>Application Pool</h3>
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mattis lectus vitae lobortis dapibus. Aliquam nunc nunc, eleifend a sodales vel, tempor sit amet mi. Sed quis orci at orci elementum hendrerit. Nulla libero arcu, dapibus ut nunc vel, luctus
                  fringilla mi. Nullam in fermentum ipsum. Mauris iaculis dui hendrerit, mattis erat id, porttitor ipsum.
                </p>
                <div class="row">
                  <div class="col-md-6">
                    <ul class="list">
                      <li><i class="fa fa-arrow-circle-o-right primary-color"></i>Lorem ipsum dolor sit amet</li>
                      <li><i class="fa fa-arrow-circle-o-right primary-color"></i>Duis lacinia dolor quis</li>
                    </ul>
                  </div>
                  <div class="col-md-6">
                    <ul class="list">
                      <li><i class="fa fa-arrow-circle-o-right primary-color"></i>Lorem ipsum dolor sit amet</li>
                      <li><i class="fa fa-arrow-circle-o-right primary-color"></i>Duis lacinia dolor quis</li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="tab-pane" id="tab-two">
          <div class="row">
            <div class="col-md-5 col-xs-12">
              <img src="images/step-1.png" class="img-responsive" alt="">
            </div>
            <div class="col-md-7 col-xs-12 ptb-40">
              <div class="main-content p-20">
                <h3><span>Search for</span><br>Uploaded Files</h3>
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mattis lectus vitae lobortis dapibus. Aliquam nunc nunc, eleifend a sodales vel, tempor sit amet mi. Sed quis orci at orci elementum hendrerit. Nulla libero arcu, dapibus ut nunc vel, luctus
                  fringilla mi. Nullam in fermentum ipsum. Mauris iaculis dui hendrerit, mattis erat id, porttitor ipsum.
                </p>
                <div class="row">
                  <div class="col-md-6">
                    <ul class="list">
                      <li><i class="fa fa-arrow-circle-o-right primary-color"></i>Lorem ipsum dolor sit amet</li>
                      <li><i class="fa fa-arrow-circle-o-right primary-color"></i>Duis lacinia dolor quis</li>
                    </ul>
                  </div>
                  <div class="col-md-6">
                    <ul class="list">
                      <li><i class="fa fa-arrow-circle-o-right primary-color"></i>Lorem ipsum dolor sit amet</li>
                      <li><i class="fa fa-arrow-circle-o-right primary-color"></i>Duis lacinia dolor quis</li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="tab-pane" id="tab-three">
          <div class="row">
            <div class="col-md-5 col-xs-12">
              <img src="images/step-1.png" class="img-responsive" alt="">
            </div>
            <div class="col-md-7 col-xs-12 ptb-40">
              <div class="main-content p-20">
                <h3><span>Keep The Files</span><br>Safe and Secure</h3>
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mattis lectus vitae lobortis dapibus. Aliquam nunc nunc, eleifend a sodales vel, tempor sit amet mi. Sed quis orci at orci elementum hendrerit. Nulla libero arcu, dapibus ut nunc vel, luctus
                  fringilla mi. Nullam in fermentum ipsum. Mauris iaculis dui hendrerit, mattis erat id, porttitor ipsum.
                </p>
                <div class="row">
                  <div class="col-md-6">
                    <ul class="list">
                      <li><i class="fa fa-arrow-circle-o-right primary-color"></i>Lorem ipsum dolor sit amet</li>
                      <li><i class="fa fa-arrow-circle-o-right primary-color"></i>Duis lacinia dolor quis</li>
                    </ul>
                  </div>
                  <div class="col-md-6">
                    <ul class="list">
                      <li><i class="fa fa-arrow-circle-o-right primary-color"></i>Lorem ipsum dolor sit amet</li>
                      <li><i class="fa fa-arrow-circle-o-right primary-color"></i>Duis lacinia dolor quis</li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="tab-pane" id="tab-four">
          <div class="row">
            <div class="col-md-5 col-xs-12">
              <img src="images/step-1.png" class="img-responsive" alt="">
            </div>
            <div class="col-md-7 col-xs-12 ptb-40">
              <div class="main-content p-20">
                <h3><span>Share with</span><br>Your Own Friends</h3>
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mattis lectus vitae lobortis dapibus. Aliquam nunc nunc, eleifend a sodales vel, tempor sit amet mi. Sed quis orci at orci elementum hendrerit. Nulla libero arcu, dapibus ut nunc vel, luctus
                  fringilla mi. Nullam in fermentum ipsum. Mauris iaculis dui hendrerit, mattis erat id, porttitor ipsum.
                </p>
                <div class="row">
                  <div class="col-md-6">
                    <ul class="list">
                      <li><i class="fa fa-arrow-circle-o-right primary-color"></i>Lorem ipsum dolor sit amet</li>
                      <li><i class="fa fa-arrow-circle-o-right primary-color"></i>Duis lacinia dolor quis</li>
                    </ul>
                  </div>
                  <div class="col-md-6">
                    <ul class="list">
                      <li><i class="fa fa-arrow-circle-o-right primary-color"></i>Lorem ipsum dolor sit amet</li>
                      <li><i class="fa fa-arrow-circle-o-right primary-color"></i>Duis lacinia dolor quis</li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <ul class="nav nav-tabs">
        <li class="active">
          <a href="#tab-one" data-toggle="tab" class="primary-bg">
            <i>1</i>
            <h5 class="heading-alt"><span>Build Your Own</span><br>Application Pool</h5>
          </a>
        </li>
        <li>
          <a href="#tab-two" data-toggle="tab" class="secondary-bg">
            <i>2</i>
            <h5 class="heading-alt"><span>Search for</span><br>Uploaded Files</h5>
          </a>
        </li>
        <li>
          <a href="#tab-three" data-toggle="tab" class="primary-bg">
            <i>3</i>
            <h5 class="heading-alt"><span>Keep The Files</span><br>Safe and Secure</h5>
          </a>
        </li>
        <li>
          <a href="#tab-four" data-toggle="tab" class="secondary-bg">
            <i>4</i>
            <h5 class="heading-alt"><span>Share with</span><br>Your Own Friends</h5>
          </a>
        </li>
      </ul>

    </div>
    <!-- /tabbable -->
  </div>
  <!-- End Container -->
</section>
<!-- End Section -->

我一直无法找到选项卡的问题所在，我没有更改 javascript 文件中的任何内容，因此它应该可以工作。我不确定如何将 bootstrap 包含到代码片段中，因此我使用 bootstrap v3.3.6。

从我看过的其他帖子中，我没有看到任何不合适的地方。

Answer 1

您缺少 bootstrap.js 文件，添加它即可工作。请参阅下面的代码演示

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<section id="works" class="ptb-80 bb-1">
  <div class="container">
    <div class="text-center">
      <h2>How It Works?</h2>
      <div class="seperator"></div>
    </div>
    <div class="tabbable full-width-tabs">
      <div class="tab-content">
        <div class="tab-pane active" id="tab-one">
          <div class="row">
            <div class="col-md-5 col-xs-12">
              <img src="images/step-1.png" class="img-responsive" alt="">
            </div>
            <div class="col-md-7 col-xs-12 ptb-40">
              <div class="main-content p-20">
                <h3><span>Build Your Own</span><br>Application Pool</h3>
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mattis lectus vitae lobortis dapibus. Aliquam nunc nunc, eleifend a sodales vel, tempor sit amet mi. Sed quis orci at orci elementum hendrerit. Nulla libero arcu, dapibus ut nunc vel, luctus
                  fringilla mi. Nullam in fermentum ipsum. Mauris iaculis dui hendrerit, mattis erat id, porttitor ipsum.
                </p>
                <div class="row">
                  <div class="col-md-6">
                    <ul class="list">
                      <li><i class="fa fa-arrow-circle-o-right primary-color"></i>Lorem ipsum dolor sit amet</li>
                      <li><i class="fa fa-arrow-circle-o-right primary-color"></i>Duis lacinia dolor quis</li>
                    </ul>
                  </div>
                  <div class="col-md-6">
                    <ul class="list">
                      <li><i class="fa fa-arrow-circle-o-right primary-color"></i>Lorem ipsum dolor sit amet</li>
                      <li><i class="fa fa-arrow-circle-o-right primary-color"></i>Duis lacinia dolor quis</li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="tab-pane" id="tab-two">
          <div class="row">
            <div class="col-md-5 col-xs-12">
              <img src="images/step-1.png" class="img-responsive" alt="">
            </div>
            <div class="col-md-7 col-xs-12 ptb-40">
              <div class="main-content p-20">
                <h3><span>Search for</span><br>Uploaded Files</h3>
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mattis lectus vitae lobortis dapibus. Aliquam nunc nunc, eleifend a sodales vel, tempor sit amet mi. Sed quis orci at orci elementum hendrerit. Nulla libero arcu, dapibus ut nunc vel, luctus
                  fringilla mi. Nullam in fermentum ipsum. Mauris iaculis dui hendrerit, mattis erat id, porttitor ipsum.
                </p>
                <div class="row">
                  <div class="col-md-6">
                    <ul class="list">
                      <li><i class="fa fa-arrow-circle-o-right primary-color"></i>Lorem ipsum dolor sit amet</li>
                      <li><i class="fa fa-arrow-circle-o-right primary-color"></i>Duis lacinia dolor quis</li>
                    </ul>
                  </div>
                  <div class="col-md-6">
                    <ul class="list">
                      <li><i class="fa fa-arrow-circle-o-right primary-color"></i>Lorem ipsum dolor sit amet</li>
                      <li><i class="fa fa-arrow-circle-o-right primary-color"></i>Duis lacinia dolor quis</li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="tab-pane" id="tab-three">
          <div class="row">
            <div class="col-md-5 col-xs-12">
              <img src="images/step-1.png" class="img-responsive" alt="">
            </div>
            <div class="col-md-7 col-xs-12 ptb-40">
              <div class="main-content p-20">
                <h3><span>Keep The Files</span><br>Safe and Secure</h3>
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mattis lectus vitae lobortis dapibus. Aliquam nunc nunc, eleifend a sodales vel, tempor sit amet mi. Sed quis orci at orci elementum hendrerit. Nulla libero arcu, dapibus ut nunc vel, luctus
                  fringilla mi. Nullam in fermentum ipsum. Mauris iaculis dui hendrerit, mattis erat id, porttitor ipsum.
                </p>
                <div class="row">
                  <div class="col-md-6">
                    <ul class="list">
                      <li><i class="fa fa-arrow-circle-o-right primary-color"></i>Lorem ipsum dolor sit amet</li>
                      <li><i class="fa fa-arrow-circle-o-right primary-color"></i>Duis lacinia dolor quis</li>
                    </ul>
                  </div>
                  <div class="col-md-6">
                    <ul class="list">
                      <li><i class="fa fa-arrow-circle-o-right primary-color"></i>Lorem ipsum dolor sit amet</li>
                      <li><i class="fa fa-arrow-circle-o-right primary-color"></i>Duis lacinia dolor quis</li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="tab-pane" id="tab-four">
          <div class="row">
            <div class="col-md-5 col-xs-12">
              <img src="images/step-1.png" class="img-responsive" alt="">
            </div>
            <div class="col-md-7 col-xs-12 ptb-40">
              <div class="main-content p-20">
                <h3><span>Share with</span><br>Your Own Friends</h3>
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mattis lectus vitae lobortis dapibus. Aliquam nunc nunc, eleifend a sodales vel, tempor sit amet mi. Sed quis orci at orci elementum hendrerit. Nulla libero arcu, dapibus ut nunc vel, luctus
                  fringilla mi. Nullam in fermentum ipsum. Mauris iaculis dui hendrerit, mattis erat id, porttitor ipsum.
                </p>
                <div class="row">
                  <div class="col-md-6">
                    <ul class="list">
                      <li><i class="fa fa-arrow-circle-o-right primary-color"></i>Lorem ipsum dolor sit amet</li>
                      <li><i class="fa fa-arrow-circle-o-right primary-color"></i>Duis lacinia dolor quis</li>
                    </ul>
                  </div>
                  <div class="col-md-6">
                    <ul class="list">
                      <li><i class="fa fa-arrow-circle-o-right primary-color"></i>Lorem ipsum dolor sit amet</li>
                      <li><i class="fa fa-arrow-circle-o-right primary-color"></i>Duis lacinia dolor quis</li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <ul class="nav nav-tabs">
        <li class="active">
          <a href="#tab-one" data-toggle="tab" class="primary-bg">
            <i>1</i>
            <h5 class="heading-alt"><span>Build Your Own</span><br>Application Pool</h5>
          </a>
        </li>
        <li>
          <a href="#tab-two" data-toggle="tab" class="secondary-bg">
            <i>2</i>
            <h5 class="heading-alt"><span>Search for</span><br>Uploaded Files</h5>
          </a>
        </li>
        <li>
          <a href="#tab-three" data-toggle="tab" class="primary-bg">
            <i>3</i>
            <h5 class="heading-alt"><span>Keep The Files</span><br>Safe and Secure</h5>
          </a>
        </li>
        <li>
          <a href="#tab-four" data-toggle="tab" class="secondary-bg">
            <i>4</i>
            <h5 class="heading-alt"><span>Share with</span><br>Your Own Friends</h5>
          </a>
        </li>
      </ul>

    </div>
    <!-- /tabbable -->
  </div>
  <!-- End Container -->
</section>
<!-- End Section -->