引導標籤查看內容未顯示

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>