jquery - Bootstrap Tab View 内容未显示

Question

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

Try This maybe Helpful to you.

Mistake

In your code, you are missing <div class="tab-content"> </div> which is main part to target tab content on tab switch event.

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