javascript - 在标签页中显示加载 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/