부트 스트랩 드롭 다운 탭이 작동하지 않습니다.

Question

드롭 다운에서 선택한 항목의 창 사이를 전환 할 수있는 드롭 다운이 있습니다. 일반적으로 드롭 다운에서 항목을 누르면 창을 전환하지만 새로운 부트 스트랩 버전 (4.0.0-beta.2) 이후에는 더 이상 응답하지 않고 tab.js:155 Uncaught TypeError: Cannot read property 'nodeName' of undefined 오류가 발생합니다. V4 베타 2에서 탭이있는 버그가 있습니다

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

,이 참조 베타 3에서 수정 될 예정입니다 https://github.com/twbs/bootstrap/pull/23087