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/

在选项卡页面中显示加载div内容

1 个答案: