Bootstrap选项卡视图内容未显示

时间：2017-02-09 04:15:58

标签： jquery twitter-bootstrap tabs

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

5 个答案:

答案 0 :(得分：3)

  

尝试这可能对您有帮助。

     

错误

     

在您的代码中，您缺少<div class="tab-content"> </div>，这是Tab切换事件上目标选项卡内容的主要部分。

＆＃13;
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：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/

答案 2 :(得分：0)

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

答案 3 :(得分：0)

这应该有效：

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>

答案 4 :(得分：0)

我已经编辑了你的代码。

＆＃13;
＆＃13; 
	 <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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题