web-dev-qa-db-ja.com

Bootstrap 4つのタブが切り替わっていません

私は現在bootstrap 4. bootstrapのドキュメントを読み、現在タブを取り込もうとしていますが、コードを切り替えていません。次のとおりです。

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Info</title>
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0- alpha.3/css/bootstrap.min.css" integrity="sha384-MIwDKRSSImVFAZCVLtU0LMDdON6KVCrZHyVQQj6e8wIEJkW4tvwqXrbMIya1vriY" crossorigin="anonymous">

   </head>
  <body>
 <?php include_once("template_pageTop.php"); ?>
  <div class="container p-t-md">
  <div class="row">
   <div class="col-md-6">
   <ul class="nav nav-tabs">
   <li class="nav-item">
    <a class="nav-link active" href="#currentPreferences">Current         Preferences</a>
    </li>
    <li class="nav-item">
     <a class="nav-link" href="#alternative"> Alternative </a>
     </li>
     <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
      </li>

      </ul>
      <div class="tab-content">
        <div role="tabpanel" class="tab-pane fade in active" id="currentPreferences">
         <ul class="list-group media-list media-list-stream">


          <?php 
           display(); 
            ?>
          </ul> 

          </div>
         <div role="tabpanel" class="tab-pane fade in" id="alternative">
         <ul class="list-group media-list media-list-stream">
         <p>Test</p>
          </ul>
           </div>

           </div>
          </div>

          </div>
            </div>
           <?php include_once("template_pageBottom.php"); ?>
           <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

           <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js">            </script>
            <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
             <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
             <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>


           </body>
            </html>

Javascriptライブラリを追加しましたが、切り替えられていないようです。他に追加できるものはありますか？フィードバックは大歓迎です。ありがとうございました

javascripttwitter-bootstrapbootstrap-4twitter-bootstrap-4
5
Ace

各リンクでdata-toggle="tab"データ属性を使用するか、 JavaScriptを使用して初期化 ..を使用する必要があります。

<ul class="nav nav-tabs">
     <li class="nav-item">
          <a class="nav-link active" data-toggle="tab" href="#currentPreferences">Current Preferences</a>
     </li>
     <li class="nav-item">
          <a class="nav-link" data-toggle="tab" href="#alternative"> Alternative </a>
     </li>
     <li class="nav-item">
          <a class="nav-link" data-toggle="tab" href="#">Link</a>
     </li>
</ul>

http://www.codeply.com/go/iHHBzDROEi

13
Zim