標籤上的Bootstrap 3數據目標屬性不起作用

我在我的網站中使用了Bootstrap選項卡。當頁面加載選項卡將在運行時使用動態內容填充數據。我在錨標籤上使用data-target屬性，但它似乎根本不起作用。標籤上的Bootstrap 3數據目標屬性不起作用

這裏是我試過到目前爲止：

HTML

<div class="container"> 
    <div class="row"> 
     <ul class="nav nav-tabs" role="tablist"> 
      <li role="presentation" class="active"> 
       <a href="showTab1.do" data-target="#test_1" aria-controls="test_1" role="tab" data-toggle="tab">Tab 1</a> 
      </li> 
      <li role="presentation"> 
       <a href="showTab2.do" data-target="#test_2" aria-controls="test_2" role="tab" data-toggle="tab">Tab 2</a> 
      </li> 
      <li role="presentation"> 
       <a href="showTab3.do" data-target="#test_3" aria-controls="test_3" role="tab" data-toggle="tab">Tab 3</a> 
      </li> 
     </ul> 
     <div class="tab-content"> 
      <div role="tabpanel" class="tab-pane active" id="test_1"></div> 
      <div role="tabpanel" class="tab-pane active" id="test_2"></div> 
      <div role="tabpanel" class="tab-pane active" id="test_3"></div> 
     </div> 
    </div> 
</div>

在這裏，我想對錨標記使用data-target="#test_1"時加載遠程文件showTab1.do的內容裏面DIV與id="test_1"。但它不起作用。我知道的是，如果我正在使用數據目標我們不需要編寫任何jQuery/JavaScript來加載標籤中的數據，因爲data-target會爲我們做這些（糾正我，如果我錯了）。我的引導版本是v3.3.6。

請糾正我錯在哪裏。感謝

來源

2016-02-06 mahendra kawde

HTML：

<div class="container"> 
    <div class="row"> 
     <ul class="nav nav-tabs" role="tablist"> 
      <li role="presentation" class="active"> 
       <a href="#test_1" aria-controls="test_1" role="tab" data-toggle="tab">Tab 1</a> 
      </li> 
      <li role="presentation"> 
       <a href="#test_2" aria-controls="test_2" role="tab" data-toggle="tab">Tab 2</a> 
      </li> 
      <li role="presentation"> 
       <a href="#test_3" aria-controls="test_3" role="tab" data-toggle="tab">Tab 3</a> 
      </li> 
     </ul> 
     <div class="tab-content"> 
      <div role="tabpanel" class="tab-pane active" id="test_1"></div> 
      <div role="tabpanel" class="tab-pane" id="test_2"></div> 
      <div role="tabpanel" class="tab-pane" id="test_3"></div> 
     </div> 
    </div> 
</div>

，並加載使用jQuery負載

JAVASCRIPT標籤內容：

<script> 
$(document).ready(function() { 
    $('#test_1').load('showTab1.do'); 
    $('#test_2').load('showTab2.do'); 
    $('#test_3').load('showTab3.do'); 
}); 
</script>

來源

2016-02-06 12:56:51 linktoahref

我很困惑，因爲爲什麼剛上鍊接有數據目標確實有不加載數據？過去我沒有寫過任何jQuery，就這樣做過。 –

您有任何鏈接或可以分享過去的代碼嗎 – linktoahref

Hi Rahul，我嘗試了上面提到的方式，並編寫了JavaScript來加載動態數據。但在我的情況下，當我點擊Tab2，瀏覽器不斷加載，並沒有加載數據 –

有一對夫婦的錯誤，但這個工程。我加了標籤1,2和3的標籤面板，所以你可以看到結果，當您點擊導航鏈接（僅僅指剛刪除的文本，以便它不會弄亂你的流量）..

<div class="container"> 
    <div class="row"> 
     <ul class="nav nav-tabs" role="tablist"> 
      <li role="presentation" class="active"><a href="#test_1" aria-controls="test_1" role="tab" data-toggle="tab">Tab 1</a></li> 
      <li role="presentation"><a href="#test_2" aria-controls="test_2" role="tab" data-toggle="tab">Tab 2</a></li> 
      <li role="presentation"><a href="#test_3" aria-controls="test_3" role="tab" data-toggle="tab">Tab 3</a></li> 
     </ul> 
     <div class="tab-content"> 
      <div role="tabpanel" class="tab-pane fade in active" id="test_1">Tab 1</div> 
      <div role="tabpanel" class="tab-pane fade" id="test_2">Tab 2</div> 
      <div role="tabpanel" class="tab-pane fade" id="test_3">Tab 3</div> 
     </div> 
    </div> 
</div>

希望這有助於 - 然後使用.load（）方法將數據加載到選項卡窗格中，如下所述。

來源

2016-02-06 12:59:08 gavgrif

正如你在上面的回答中所描述的，沒有.load（）方法。但我意識到你的意思。我很困惑，因爲爲什麼只有鏈接上的數據目標不會在那裏加載數據？過去我沒有寫過任何jQuery，就這樣做過。 –

對不起 - 我的意思是@Rahul Chandrasekharan所描述的.load（）（他在我之前發佈了答案）。您可以使用data-target屬性來標識您希望切換的標籤的ID，或者僅使用href來指示它，但不能使用該屬性將外部內容加載到選項卡窗格div中。爲此，需要使用.load（）方法。希望這可以幫助。 – gavgrif

使用數據屬性無法將另一個url中的數據自動load轉換爲標籤內容。你需要火的時候顯示選項卡事件觸發...

$('a[data-toggle="tab"]').on('show.bs.tab', function (e) { 
    ... 

    $(target).load(url,function(result){  
    ... 
    }); 
});

例jQuery的load()方法： http://codeply.com/go/xZfTnAtKUM

來源

2016-02-06 14:23:35 ZimSystem

嘿，我只是試過這種方式，但它沒有爲我工作。但是當我調試腳本時，我發現它能夠獲得遠程內容，但是當我們做'tab.tab（'show'）;'它沒有顯示任何東西。 –

標籤上的Bootstrap 3數據目標屬性不起作用

回答

相關問題