只有當選擇了jQuery加載div內容

我打算設置很多包含大量HTML的選項卡，並且我不會減慢頁面並將所有內容加載到頁面加載時的DOM。那麼，如何才能使用jQuery加載div內容時，只有當每個選項卡被選中？只有當選擇了jQuery加載div內容

HTML會是這樣的：

<ul id="nav"> 
    <li><a href="#content1">Tab 1</a></li> 
    <li><a href="#content2">Tab 2</a></li> 
    <li><a href="#content3">Tab 3</a></li> 
</ul> 

<div id="content1">CONTENT</div> 
<div id="content2">CONTENT</div> 
<div id="content3">CONTENT</div>

來源

2014-09-27 MShack

使用AJAX，而不是加載您的內容。 – vitorio 2014-09-27 12:17:20

使用ajax時，內容不需要在另一頁上？我想將每個選項卡的內容放在同一頁面上，但在DOM中沒有加載任何東西，直到我點擊 – MShack 2014-09-27 12:23:35

AJAX更好，只有選項。 @MShack – vitorio 2014-09-27 12:29:17

這確實是使用AJAX最好的實現。

您可以存儲標籤內容對象數組並根據標籤索引加載它們;

<div id="tabs"> 
    <ul> 
     <li><a href="#content0">Tab 0</a></li> 
     <li><a href="#content1">Tab 1</a></li> 
     <li><a href="#content2">Tab 2</a></li> 
    </ul> 

    <div id="content0"></div> 
    <div id="content1"></div> 
    <div id="content2"></div> 
</div> 

<script type="text/javascript"> 

    var tabcontent = new Array(); 

    /* Load page */ 
    tabcontent[0] = $('<div>').load('0.html'); 

    /* Add content */ 
    tabcontent[1] = $('<div>').html('Tab content 1'); 

    /* Add elements */ 
    tabcontent[2] = $('<div>').html('<div>Tab content 2</div>'); 

    $('#tabs').tabs({ activate: function(event ,ui) { 
      $('#content' + ui.newTab.index()).html(tabcontent[ui.newTab.index()].html()); 
     } 
    }); 

</script>

見jsFiddle

來源

2014-09-27 12:59:46 TheStatehz

不能得到這個工作，所有內容顯示http://jsfiddle.net/rbvmj1cw/6/ – MShack 2014-09-27 14:25:42

與工作小提琴更新。您需要包含jQuery庫，jQuery UI庫和jQuery UI樣式表。請參閱小提琴上的** External Resources **部分。 – TheStatehz 2014-09-27 18:54:21

您可以加載使用Ajax，並把它給你的DIV neccessary數據。順便說一句，在這種情況下，你只需要一個div的內容。

jQuery(document).ready(function(){ 
    jQuery('#nav a').click(function(){ 
     jQuery.get('get_content.php',{ 
      content: jQuery(this).attr('href').substr(1) 
     },function(data){ 
      jQuery('#content').html(data); 
     }); 
     return false; 
    }); 
});

get_content.php將獲得$ _GET [「內容」] ==「內容1」或「內容2」，或者根據被點擊的按鈕「content3」，所以知道這個你應該從它返回必要的內容。

來源

2014-09-27 12:45:44 dmikam

我用這個設置了一個小提琴，但所有的div內容都顯示出來了嗎？ http://jsfiddle.net/rbvmj1cw/ – MShack 2014-09-27 13:39:57

只有當選擇了jQuery加載div內容

回答

相關問題