Bootstrap Tab 视图内容未显示

Question

我已经使用引导程序实现了选项卡，有 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>

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>