javascript - Bootstrap 下拉选项卡不起作用

Question

我有一个下拉菜单，可以在下拉菜单中所选元素的 Pane 之间切换。 通常，当我按下下拉列表中的元素时它会切换 Pane ，但由于新的 Bootstrap 版本 (4.0.0-beta.2) 它不再响应，它给我留下了 tab.js:155 Uncaught类型错误:无法读取未定义的属性“nodeName” 错误。

JSFiddle

<div class="tab-pane fade show active" id="adventure" role="tabpanel" aria-labelledby="adventure-tab">
   <div class="card" style="">
      <div class="tab-content">
         <div class="tab-pane fade show active" id="large-clipper" aria-labelledby="large-clipper-tab">
            <div class="card-header">
               <div class="dropdown btn-group float-right">
                  <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  Variations
                  </button>
                  <div class="dropdown-menu" role="tablist" aria-labelledby="dropdownMenuButton">
                     <a class="dropdown-item nav-link" id="large-clipper-tab" href="#large-clipper" data-toggle="tab" role="tab" aria-controls="large-clipper" aria-selected="false">Large Clipper</a>
                     <a class="dropdown-item nav-link" id="festive-large-clipper-tab" href="#festive-large-clipper" data-toggle="tab" role="tab" aria-controls="festive-large-clipper" aria-selected="false">Festive Large Clipper</a>
                  </div>
               </div>
               <img src="http://eversong.ivyro.net/SHIP/00000024.png" height="50" width="50">
               <h4 style="display:inline-block">Large Clipper</h4>
            </div>
            <div class="card-body">
               <h6 class="text-muted">
                  Just a big and fast clipper.
               </h6>
               <p class=" p-y-1">
                  <span style="font-style:italic">Level requirements: </span>
                  <span>Adventure: 30 </span>
                  <span>Trade: 56 </span>
                  <span>Maritime: 75</span>
               </p>
               <div class="row">
                  <div class="col-md-6"><a class="btn btn-primary btn-lg btn-block my-1" href="">Selling: <span>5</span> </a></div>
                  <div class="col-md-6"><a class="btn btn-primary btn-lg btn-block my-1" href="">Buying: <span>10</span> </a></div>
               </div>
            </div>
         </div>
         <div class="tab-pane fade" id="festive-large-clipper"  role="tabpanel" aria-labelledby="large-clipper-tab">
            <div class="card-header">
               <div class="btn-group float-right">
                  <button class="btn btn-primary dropdown-toggle" id="variationsDropdown" type="button" aria-haspopup="true" aria-expanded="true" data-toggle="dropdown"> Variations </button>
                  <div class="dropdown-menu" aria-labelledby="variationsDropdown">
                     <a class="dropdown-item" href="#large-clipper" data-toggle="tab">Large Clipper</a>
                     <a class="dropdown-item" href="#festive-large-clipper" data-toggle="tab">Festive Large Clipper</a>                                             
                  </div>
               </div>
               <img src="http://eversong.ivyro.net/SHIP/00000024.png" height="50" width="50">
               <h4 style="display:inline-block">Festive Large Clipper</h4>
            </div>
            <div class="card-body">
               <h6 class="text-muted">
                  A large clipper but with fancy plating.
               </h6>
               <p class=" p-y-1">
                  <span style="font-style:italic">Level requirements: </span>
                  <span>Adventure: 30 </span>
                  <span>Trade: 56 </span>
                  <span>Maritime: 75</span>
               </p>
               <div class="row">
                  <div class="col-md-6"><a class="btn btn-primary btn-lg btn-block my-1" href="">Selling: <span>5</span> </a></div>
                  <div class="col-md-6"><a class="btn btn-primary btn-lg btn-block my-1" href="">Buying: <span>10</span> </a></div>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>

所需文件

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>

Answer 1

v4 beta 2 中的选项卡存在错误，这将在 beta 3 中修复，请参阅 https://github.com/twbs/bootstrap/pull/23087