在选项卡式页面的节目中加载div内容

Question

我使用jQuery创建了一个带有选项卡的网页。 选项卡开关工作得很好，但是现在我要实现的是仅当用户第一次单击选项卡时，才用AJAX动态加载div内容。 我已经将标记作为属性添加到选项卡内容div上，类似于data-loaded="0"这样当用户第二次单击同一选项卡时，不会再次加载数据。 但是，将数据动态加载到div的最佳方法是什么？ 我想使其通用，以便可以为每个选项卡更改用于加载数据的JS（jQuery）函数。

我在下面放了代码片段

如果有人想玩，我已经在jsfiddle中加载： https ://jsfiddle.net/ofwvr0hq/

 jQuery(document).ready(function() { $('ul.tabs li').click(function(){ var tab_id = $(this).attr('data-tab'); $('ul.tabs li').removeClass('current'); $('.tab-content').removeClass('current'); $(this).addClass('current'); $("#"+tab_id).addClass('current'); $('ul.tabs li').each(function () { var nimg = $(this).find('img').attr('src'); $(this).find('img').attr('src', nimg.replace('_r', '_g')); }); var img = $(this).find( 'img' ).attr('src'); $(this).find( 'img' ).attr('src', img.replace('_g', '_r')); }); }); 

 ul.tabs{ margin: 0px; padding: 0px; list-style: none; } ul.tabs li{ line-height: 24px; background: #ededed; color: #777; display: inline-block; padding: 10px 40px; cursor: pointer; font: 16pt arial,verdana !important; border: 1px solid rgb(164, 162, 162); border-right: medium none; margin-right: -5px; } ul.tabs li.current{ background: none; color: rgb(227,32,46); border-bottom: 0; border-top: 3px solid rgb(227,32,46); padding-top: 8px; } .tab-content{ display: none; padding-top: 15px; } .tab-content.current{ display: inherit; } ul.tabs > li > img { margin-right: 5px; width: 24px; height: 24px; } .tabLast { border-right: 1px solid rgb(164, 162, 162) !important; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <ul class="tabs"> <li data-tab="tab-1" class="tab-link"><img style="float:left;" src="http://fantamondi.it/silcam/images/pencil_g.png"> Amministratore</li> <li data-tab="tab-2" class="tab-link current"><img style="float:left;" src="http://fantamondi.it/silcam/images/pencil_r.png"> Letture</li> <li data-tab="tab-3" class="tab-link"><img style="float:left;" src="http://fantamondi.it/silcam/images/pencil_g.png"> Unità immobiliari</li> <li data-tab="tab-5" class="tab-link tabLast"><img style="float:left;" src="http://fantamondi.it/silcam/images/pencil_g.png"> Riparti</li> </ul> <div id="tab-1" class="tab-content">TAB 1</div> <div id="tab-2" class="tab-content current">TAB 2</div> <div id="tab-3" class="tab-content">TAB 3</div> <div id="tab-5" class="tab-content">TAB 4</div> 

提前致谢

Answer 1

您可以使用jQuery .load（）。 基本上，您将拥有一个包含div的页面，该页面具有每页所需的内容，并且只需在单击选项卡时加载该ID。

例如：

$("#tab-container").load( "ajax/tabs.html #tab-1" );

另请参阅： http : //api.jquery.com/load/