クリックしたときにブートストラップのタブが機能しない

Question

私はウェブサイトにブートストラップを使用しており、それがもたらすタブ機能を使用しています。私はドキュメンテーションを見て、私はすべてを正しくやっていると信じています。それが動作するはずですので、私は、タブと間違っているものを見つけることができなかった

<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ファイルには何も変わっていません。ブートストラップをコードスニペットに含める方法がわからないので、ブートストラップv3.3.6を使用しています。

他の投稿から私は見て、私は場所から何かが表示されません。

Answer 1

bootstrap.jsファイルがありません。追加してください。 https://getbootstrap.com/docs/3.3/javascript/#tabs

<div> 
 

 
    <!-- Nav tabs --> 
 
    <ul class="nav nav-tabs" role="tablist"> 
 
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li> 
 
    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li> 
 
    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li> 
 
    <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li> 
 
    </ul> 
 

 
    <!-- Tab panes --> 
 
    <div class="tab-content"> 
 
    <div role="tabpanel" class="tab-pane active" id="home">...</div> 
 
    <div role="tabpanel" class="tab-pane" id="profile">...</div> 
 
    <div role="tabpanel" class="tab-pane" id="messages">...</div> 
 
    <div role="tabpanel" class="tab-pane" id="settings">...</div> 
 
    </div> 
 

 
</div>

：私は、タブリスト内のアンカータグにロールを割り当てる見るすべてのタブの例のドキュメントでは、あなたのコード

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

Answer 2

のデモの下を参照してください。

役割を追加しようとしましたか？私はその役割がどのように作用すると考えられるかに影響すると思うので、アンカーリンクのように振る舞うのではなく、タブのように振る舞うべきです。