Bootstrap 4选项卡没有切换答案

【问题标题】：Bootstrap 4 Tabs are not switchingBootstrap 4选项卡没有切换
【发布时间】：2023-08-09 07:55:01
【问题描述】：

我目前正在使用引导程序 4。我阅读了引导程序文档，目前正在尝试合并选项卡，但它们没有切换我的代码如下：

<!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 库，但它似乎没有切换。还有什么我可以添加的吗？欢迎任何反馈。谢谢

【问题讨论】：

标签： javascript twitter-bootstrap bootstrap-4 twitter-bootstrap-4

【解决方案1】：

你需要在每个链接中使用data-toggle="tab"数据属性，或者initialize using 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

【讨论】：

@Zim 如果我使用文档中提到的div 方法，这将不起作用。我还有什么遗漏吗？