製表符不會在其製表符窗格中加載內容

我正嘗試使用導航製表符導航來製作引導程序站點。我似乎無法弄清楚爲什麼我的選項卡不會在其選項卡中加載內容。我可以讓它在教程中工作，但在我的項目上。任何幫助，將不勝感激。我只是希望標籤內容在我點擊鏈接時出現。目前它停留在第一個標籤上，它不會移動。謝謝！製表符不會在其製表符窗格中加載內容

<html> 

<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> 
    <script type="text/javascript" src="http://netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> 
    <link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css" 
    rel="stylesheet" type="text/css"> 
    <link href="http://pingendo.github.io/pingendo-bootstrap/themes/default/bootstrap.css" 
    rel="stylesheet" type="text/css"> 
    <script> 
     $(function() { 
      $('#myTab a:first').tab('show') 
      }) 
    </script> 
</head> 

<body> 
    <div class="cover"> 
     <div class="navbar"> 
      <div class="container"> 
       <ul id="myTab" class="nav nav-tabs nav-justified"> 
        <li class="active"> 
         <a href="#home">Home</a> 
        </li> 
        <li> 
         <a href="#profile">Profile</a> 
        </li> 
        <li> 
         <a href="#messages">Messages</a> 
        </li> 
        <li> 
         <a href="#settings">Settings</a> 
        </li> 
       </ul> 
       <div class="tab-content"> 
        <div class="tab-pane active" id="home">Your Home tab content here</div> 
        <div class="tab-pane" id="profile">Your Profile tab content here</div> 
        <div class="tab-pane" id="messages">Your Messages tab content here</div> 
        <div class="tab-pane" id="settings">Your Settings tab content here</div> 
       </div> 
      </div> 
     </div> 
     <div class="cover-image" style="background-image: url(https://unsplash.imgix.net/photo-1418065460487-3e41a6c84dc5?q=75&amp;fm=jpg&amp;s=127f3a3ccf4356b7f79594e05f6c840e);"></div> 
     <div class="container"> 
      <div class="row"> 
       <div class="col-md-12 text-center"> 
        <h1 class="text-inverse">Heading</h1> 
        <p class="text-inverse">Lorem ipsum dolor sit amet, consectetur adipisici eli.</p> 
        <br> 
        <br> 
        <a class="btn btn-lg btn-primary">Click me</a> 
       </div> 
      </div> 
     </div> 
    </div> 
</body>

來源

2015-04-30 Sid Hernandez

請參閱本http://www.bootply.com/FArUNyj3TY結合madaaah的回答是：你錯過了'數據切換：「標籤」'您'

...

'元素。 –

ahhh非常感謝你!!!!!! –

這是自舉自己的文檔提供的代碼，在代碼中，我可以看到有結構上遠不如屬性，可能是缺乏一個與功能搞亂。

數據切換和角色更有可能。

祝你好運。 ;）

<ul class="nav nav-tabs" role="tablist"> 
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li> 
    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li> 
    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li> 
    <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li> 
    </ul> 

    <!-- Tab panes --> 
    <div class="tab-content"> 
    <div role="tabpanel" class="tab-pane active" id="home">...</div> 
    <div role="tabpanel" class="tab-pane" id="profile">...</div> 
    <div role="tabpanel" class="tab-pane" id="messages">...</div> 
    <div role="tabpanel" class="tab-pane" id="settings">...</div> 
    </div>

來源

2015-04-30 20:18:05 madagalbiati

您的代碼片段使用純HTML格式，因爲您沒有包含'bootstrap.css'，並且沒有功能，因爲您沒有包含'bootstrap.js'和'jquery.js'。請將其添加或創建JSFiddle或Bootply以更好地展示您的工作解決方案。另外，如果缺少'data-toggle'，它會導致錯誤，但是'role'不會，因爲它是一個可訪問性屬性。 –

嗯，我只是想說明，有一些缺失的屬性，因爲我已經有這樣的錯誤，這是原因，但時間不足。感謝您對這些屬性如何工作的客觀解釋，我相信這將對未來有所幫助。祝你一切順利。 – madagalbiati

哦，我明白了。那麼在這種情況下，只需刪除代碼片段。如果它沒有功能，而且你也不打算有它，那麼你可能根本不需要它，所以我可以爲你刪除它:)我沒有意識到你只是顯示標記，但這使得感。乾杯 –

製表符不會在其製表符窗格中加載內容

回答

相關問題