引导选项卡视图内容未显示答案

【问题标题】：Bootstrap Tab view content is not showing引导选项卡视图内容未显示
【发布时间】：2017-02-09 04:15:57
【问题描述】：

我已经使用引导程序实现了选项卡，有 4 个选项卡，每个选项卡中都有内容，但是当我执行代码时，该选项卡的所有内容以及所有其他选项卡内容都显示在第一个选项卡下，并且其他标签内容为空白。这是到目前为止的代码：

<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>

【问题讨论】：

哦，抱歉，遇到了一些网络问题，现在您的问题已被接受

标签： jquery twitter-bootstrap tabs

【解决方案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>

【讨论】：

【解决方案2】：

按照顺序来

<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/

【讨论】：

【解决方案3】：

我已经编辑了你的代码。

	 <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>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
      
      <ul class="nav nav-tabs">
         <li class="active">
		 <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>

【讨论】：

【解决方案4】：

这应该可行：

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>

【讨论】：

【解决方案5】：

<!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>

【讨论】：

试试上面完整的例子