ブートストラップタブの表示内容が表示されない

Question

ブートストラップを使用してタブを実装しました.4つのタブがあり、それぞれにコンテンツがありますが、コードを実行中は他のタブのコンテンツコードは、これまでの最初のタブおよびその他のタブの内容の下にblank.hereされ示す。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
<ul class="nav nav-tabs nav-justified" role="tablist"> 
 
       <li role="presentation" class="active settingshead"><a href="#first" aria-controls="first" role="tab" 
 
             data-toggle="tab" value="first"> 
 
              1 
 
             </a> 
 
       </li> 
 
       <li role="presentation"><a href="#second" class="settingshead" aria-controls="second" role="tab" 
 
             data-toggle="tab" value="second"> 
 
              2 
 
             </a> 
 
       </li> 
 
       <li role="presentation"><a href="#third" aria-controls="third" role="tab" 
 
             data-toggle="tab" value="third"> 
 
              3 
 
             </a> 
 
       </li> 
 
       <li role="presentation"><a href="#fourth" aria-controls="fourth" role="tab" 
 
             data-toggle="tab" value="fourth"> 
 
              4 
 
             </a> 
 
       </li> 
 

 
      </ul> 
 
    </div> 
 

 
<div role="tabpanel" class="tab-pane active" id="first"> 
 
        <div class="namedesig"> 
 
      <h4>Dr. Jane Doe</h4> 
 
      <p>PhD in Applied Physics</p> 
 
      </div> 
 
       </div> 
 
<div role="tabpanel" class="tab-pane" id="second"> 
 
        <div class="namedesig"> 
 
      <h4>Dr. Martin</h4> 
 
      <p>PhD in Applied Chemistry</p> 
 
      </div> 
 
       </div> 
 
    <div role="tabpanel" class="tab-pane" id="third"> 
 
         <div class="namedesig"> 
 
      <h4>Dr. John</h4> 
 
      <p>PhD in Applied Biology</p> 
 
      </div> 
 
        </div> 
 
<div role="tabpanel" class="tab-pane" id="fourth"> 
 
         <div class="namedesig"> 
 
      <h4>Dr. Watson</h4> 
 
      <p>PhD in Applied Math</p> 
 
      </div> 
 
        </div>

Answer 1

はあなたに多分役立つこれを試してみてください実施例であるために従ってください。

あなたのコードに誤り

は、あなたがタブ切り替えイベントのタブの内容を対象とする主要部分である<div class="tab-content"> </div>が欠落しています。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.js"></script> 
 
<!--script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script--> 
 

 
<div> 
 
    <ul class="nav nav-tabs"> 
 
    <li class="active settingshead"><a href="#first" data-toggle="tab">1</a></li> 
 
    <li class="settingshead"><a href="#second" data-toggle="tab">2</a></li> 
 
    <li class="settingshead"><a href="#third" data-toggle="tab">3</a></li> 
 
    <li class="settingshead"><a href="#fourth" data-toggle="tab">4</a></li> 
 
    </ul> 
 
</div> 
 
<div class="tab-content"> 
 
    <div class="tab-pane active" id="first"> 
 
     <div class="namedesig"> 
 
     <h4>Dr. Jane Doe</h4> 
 
     <p>PhD in Applied Physics</p> 
 
    </div> 
 
    </div> 
 
    <div class="tab-pane" id="second"> 
 
    <div class="namedesig"> 
 
     <h4>Dr. Martin</h4> 
 
     <p>PhD in Applied Chemistry</p> 
 
    </div> 
 
    </div> 
 
    <div class="tab-pane" id="third"> 
 
    <div class="namedesig"> 
 
     <h4>Dr. John</h4> 
 
     <p>PhD in Applied Biology</p> 
 
    </div> 
 
    </div> 
 
    <div class="tab-pane" id="fourth"> 
 
    <div class="namedesig"> 
 
     <h4>Dr. Watson</h4> 
 
     <p>PhD in Applied Math</p> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

<!DOCTYPE html> 
<html> 
    <head> 
     <title>TODO supply a title</title> 
     <meta charset="UTF-8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
     <script 
    src="https://code.jquery.com/jquery-3.1.1.min.js" 
    integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" 
    crossorigin="anonymous"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.js" ></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 

    </head> 
    <body> 

<div> 
<ul class="nav nav-tabs nav-justified" role="tablist"> 
       <li role="presentation" class="active settingshead"><a href="#first" aria-controls="first" role="tab" 
             data-toggle="tab" value="first"> 
              1 
             </a> 
       </li> 
       <li role="presentation"><a href="#second" class="settingshead" aria-controls="second" role="tab" 
             data-toggle="tab" value="second"> 
              2 
             </a> 
       </li> 
       <li role="presentation"><a href="#third" aria-controls="third" role="tab" 
             data-toggle="tab" value="third"> 
              3 
             </a> 
       </li> 
       <li role="presentation"><a href="#fourth" aria-controls="fourth" role="tab" 
             data-toggle="tab" value="fourth"> 
              4 
             </a> 
       </li> 

      </ul> 
    </div> 
<div class="tab-content"> 
<div role="tabpanel" class="tab-pane active" id="first"> 
        <div class="namedesig"> 
      <h4>Dr. Jane Doe</h4> 
      <p>PhD in Applied Physics</p> 
      </div> 
       </div> 
<div role="tabpanel" class="tab-pane" id="second"> 
        <div class="namedesig"> 
      <h4>Dr. Martin</h4> 
      <p>PhD in Applied Chemistry</p> 
      </div> 
       </div> 
    <div role="tabpanel" class="tab-pane" id="third"> 
         <div class="namedesig"> 
      <h4>Dr. John</h4> 
      <p>PhD in Applied Biology</p> 
      </div> 
        </div> 
<div role="tabpanel" class="tab-pane" id="fourth"> 

      <h4>Dr. Watson</h4> 
      <p>PhD in Applied Math</p> 

        </div> 
    </div> 

    </body> 
</html> 

Answer 3

これは動作するはずです：

Fiddle

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 

<div> 
    <ul class="nav nav-tabs" role="tablist" id="myTabs"> 
     <li role="presentation" class="active settingshead"> 
      <a href="#first" data-toggle="tab">1</a> 
     </li> 
     <li role="presentation" class="settingshead"> 
      <a href="#second" data-toggle="tab">2</a> 
     </li> 
     <li role="presentation" class="settingshead"> 
      <a href="#third" data-toggle="tab">3</a> 
     </li> 
     <li role="presentation" class="settingshead"> 
      <a href="#fourth" data-toggle="tab">4</a> 
     </li> 
    </ul> 
</div> 

<div class="tab-content"> 
    <div role="tabpanel" class="tab-pane fade in active" id="first"> 
     <div class="namedesig"> 
      <h4>Dr. Jane Doe</h4> 
      <p>PhD in Applied Physics</p> 
     </div> 
    </div> 
    <div role="tabpanel" class="tab-pane fade" id="second"> 
     <div class="namedesig"> 
      <h4>Dr. Martin</h4> 
      <p>PhD in Applied Chemistry</p> 
     </div> 
    </div> 
    <div role="tabpanel" class="tab-pane fade" id="third"> 
     <div class="namedesig"> 
      <h4>Dr. John</h4> 
      <p>PhD in Applied Biology</p> 
     </div> 
    </div> 
    <div role="tabpanel" class="tab-pane fade" id="fourth"> 
     <div class="namedesig"> 
      <h4>Dr. Watson</h4> 
      <p>PhD in Applied Math</p> 
     </div> 
    </div> 
</div> 

Answer 4

ここ

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> 
<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> 
<!-- Nav tabs --> 
<ul class="nav nav-tabs" role="tablist"> 
    <li class="nav-item"> 
    <a class="nav-link active" data-toggle="tab" href="#home" role="tab">Home</a> 
    </li> 
    <li class="nav-item"> 
    <a class="nav-link" data-toggle="tab" href="#profile" role="tab">Profile</a> 
    </li> 
    <li class="nav-item"> 
    <a class="nav-link" data-toggle="tab" href="#messages" role="tab">Messages</a> 
    </li> 
    <li class="nav-item"> 
    <a class="nav-link" data-toggle="tab" href="#settings" role="tab">Settings</a> 
    </li> 
</ul> 

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

がhttp://bootsbin.com/bin/view/47/

Answer 5

私はあなたのコードを編集しました。

\t <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
\t <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 
\t <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
\t <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
\t <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
     
 
     <ul class="nav nav-tabs"> 
 
     <li class="active"> 
 
\t \t <a data-toggle="tab" href="#first">1</a></li> 
 
     <li><a data-toggle="tab" href="#second">2</a></li> 
 
     <li><a data-toggle="tab" href="#third">3</a></li> 
 
     <li><a data-toggle="tab" href="#fourth">4</a></li> 
 
     </ul> 
 
     <div class="tab-content"> 
 
     <div id="first" class="tab-pane fade in active"> 
 
      
 
    <div class="namedesig"> 
 
     <h4>Dr. Jane Doe</h4> 
 
     <p>PhD in Applied Physics</p> 
 
    </div> 
 
     </div> 
 
     <div id="second" class="tab-pane fade"> 
 
      <div class="namedesig"> 
 
     <h4>Dr. Martin</h4> 
 
     <p>PhD in Applied Chemistry</p> 
 
    </div> 
 
     </div> 
 
     <div id="third" class="tab-pane fade"> 
 
    <div class="namedesig"> 
 
     <h4>Dr. John</h4> 
 
     <p>PhD in Applied Biology</p> 
 
    </div> 
 
     </div> 
 
     <div id="fourth" class="tab-pane fade"> 
 
    <div class="namedesig"> 
 
     <h4>Dr. Watson</h4> 
 
     <p>PhD in Applied Math</p> 
 
    </div> 
 
     </div> 
 
     </div>