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

Question

I've made a tabbed web page with a switch using jQuery. The tab switch works nice, but now what i want to achieve is to dinamically load div content with AJAX only when the user clicks on a tab for the first time. I've though of putting a flag as an attribute on tab content div, something like data-loaded="0" so that when a user clicks for a second time on the same tab, the data isn't loaded a second time. But what's the best way to dinamically load the data into the div? I'd like to make it general so that the JS (jQuery) function to load data can change for each tab.

Below i've put the code snippet

If someone wants to play with it i've loaded in 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> 

Thanks in advance

Answer 1

You could use jQuery .load(). Basically, you would have a page with the div's with the content you want per page and just load that id when the tab is clicked.

Ex:

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

Also see: http://api.jquery.com/load/