经典论坛 › 论坛 › 网站开发区 › 前台制作与脚本专栏 › 打开页面后如何只加载第1个TAB 里的内容？

查看: 828|回复: 9

打开页面后如何只加载第1个TAB 里的内容？ [复制链接]

iamnat　楼主

初级会员 

帖子: 43
体力: 109
威望: 0
居住地: 吉林省长春市

发表于 2011-7-21 11:22:27 |显示全部楼层

如图：如何在打开页面时，只加载第1个tab的内容，而其它选项卡里的内容只有手动去切换时才加载呢？

求助蓝色各位高手

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>网页层切换效果_TAB效果大全</title>
<style>
*{margin:0;padding:0;}
body{margin:50px;font-size:14px;color:#333;}
li{list-style:none;}
.tab1{width:760px;height:24px;}
.tab1 ul{margin:0;padding:0;}
.tab1 li{float:left;padding:0 10px;margin-right:5px;height:24px;line-height:24px;text-align:center;border:1px #D0E0CF solid;background-color:#FFF;border-bottom:1px #7BD676 solid;cursor:pointer; position:relative;top:-1px!important;top:1px;}
.tab1 li.now{color:#009900;background:#fff;font-weight:bold;border:1px #7BD676 solid;border-bottom:1px #fff solid;}
.tablist{width:778px;padding:10px;font-size:14px;line-height:24px;border:1px #7BD676 solid;display:none;}
.block{display:block;}
</style>
<script type="text/javascript">
function tab(o, s, cb, ev){ //tab切换类
var $ = function(o){return document.getElementById(o)};
var css = o.split((s||'_'));
if(css.length!=4)return;
this.event = ev || 'onclick';
o = $(o);
if(o){
this.ITEM = [];
o.id = css[0];
var item = o.getElementsByTagName(css[1]);
var j=1;
for(var i=0;i<item.length;i++){
if(item[i].className.indexOf(css[2])>=0 || item[i].className.indexOf(css[3])>=0){
if(item[i].className == css[2])o['cur'] = item[i];
item[i].callBack = cb||function(){};
item[i]['css'] = css;
item[i]['link'] = o;
this.ITEM[j] = item[i];
item[i]['Index'] = j++;
item[i][this.event] = this.ACTIVE;
}
}
return o;
}
}
tab.prototype = {
ACTIVE:function(){
var $ = function(o){return document.getElementById(o)};
this['link']['cur'].className = this['css'][3];
this.className = this['css'][2];
try{
$(this['link']['id']+'_'+this['link']['cur']['Index']).style.display = 'none';
$(this['link']['id']+'_'+this['Index']).style.display = 'block';
}catch(e){}
this.callBack.call(this);
this['link']['cur'] = this;
}
}
</script>
</head>
<body>

</div>

提示：您可以先修改部分代码再运行

[ 本帖最后由 iamnat 于 2011-7-21 11:24 编辑 ]

附件: 你需要登录才可以下载或查看附件。没有帐号？注册 

西部数码云主机4G内存500G仅需423元

使用道具举报

ypd007　

高级会员 

帖子: 268
体力: 576
威望: 0

发表于 2011-7-21 11:27:16 |显示全部楼层

没明白你要干嘛。。。。你下面给的代码，不就能实现你要的效果么？

租服务器，上51IDC

使用道具举报

iamnat　楼主

初级会员 

帖子: 43
体力: 109
威望: 0
居住地: 吉林省长春市

发表于 2011-7-21 11:30:04 |显示全部楼层

原帖由 ypd007 于 2011-7-21 11:27 发表
没明白你要干嘛。。。。你下面给的代码，不就能实现你要的效果么？

不好意思，可能我描述得不清

就是其它选项卡里的内容，在打开页面后，不加载，什么时候我去手动切换时，再加载

就是不让页面读出来，加快预览速度

使用道具举报

WellFrog　

井底的蛙

银牌会员 

帖子: 1540
体力: 2693
威望: 7
居住地: 上海市长宁区

发表于 2011-7-21 11:34:30 |显示全部楼层

很简单。
首先所有选项卡内容默认为空，点击选项卡标题后，判断改选项卡内容是否为空，空则去ajax加载需要的数据。

页面打开时，默认加载第一个选项卡的内容

深夜，我，拖着疲惫的步伐迈向心中的理想。

使用道具举报

iamnat　楼主

初级会员 

帖子: 43
体力: 109
威望: 0
居住地: 吉林省长春市

发表于 2011-7-21 11:35:42 |显示全部楼层

原帖由 WellFrog 于 2011-7-21 11:34 发表
很简单。
首先所有选项卡内容默认为空，点击选项卡标题后，判断改选项卡内容是否为空，空则去ajax加载需要的数据。

页面打开时，默认加载第一个选项卡的内容

兄弟不才，能在我给出的代码中给弄一下吗？谢谢

使用道具举报

faeng220　

小秦

版主 

帖子: 2941
体力: 6917
威望: 13
居住地: 河南省平顶山市

发表于 2011-7-21 11:55:49 |显示全部楼层

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>网页层切换效果_TAB效果大全</title>
<style>
*{margin:0;padding:0;}
body{margin:50px;font-size:14px;color:#333;}
li{list-style:none;}
.tab1{width:760px;height:24px;}
.tab1 ul{margin:0;padding:0;}
.tab1 li{float:left;padding:0 10px;margin-right:5px;height:24px;line-height:24px;text-align:center;border:1px #D0E0CF solid;background-color:#FFF;border-bottom:1px #7BD676 solid;cursor:pointer; position:relative;top:-1px!important;top:1px;}
.tab1 li.now{color:#009900;background:#fff;font-weight:bold;border:1px #7BD676 solid;border-bottom:1px #fff solid;}
.tablist{width:778px;padding:10px;font-size:14px;line-height:24px;border:1px #7BD676 solid;display:none;}
.block{display:block;}
</style>
<script type="text/javascript">
	function tab(o, s, cb, ev){ //tab切换类
		var css = o.split((s||'_'));
		if(css.length != 4)return;
		this.event = ev || 'onclick';
		if((o = document.getElementById(o)) != null){
			this.ITEM = [];
			o.id = css[0];
			var item = o.getElementsByTagName(css[1]), j = 1;
			for(var i=0;i<item.length;i++){
				if(item[i].className.indexOf(css[2])>=0 || item[i].className.indexOf(css[3])>=0){
					if(item[i].className == css[2])o['cur'] = item[i];
					item[i].callBack = cb||function(){};
					item[i]['css'] = css;
					item[i]['link'] = o;
					this.ITEM[j] = item[i];
					item[i]['Index'] = j++;
					item[i][this.event] = this.ACTIVE;
				}
			}
			return o;
		}
	}
	tab.prototype = {
		ACTIVE:function(){
				if(this['link']['cur'].className == this)return;//如果点的是已经显示的,则直接返回不触发下面的代码
				var $ = function(o){return document.getElementById(o)};
				this['link']['cur'].className = this['css'][3];
				this.className = this['css'][2];
				try{
					$(this['link']['id']+'_'+this['link']['cur']['Index']).style.display = 'none';
					$(this['link']['id']+'_'+this['Index']).style.display = 'block';
				}catch(e){}
				this.callBack.call(this);
				this['link']['cur'] = this;
		}
}
</script>
</head>
<body>
	<div class="tab1">
		<ul id="test1_li_now_">
			<li class="now">名站导航</li>
			<li>本地网站</li>
			<li>我的导航</li>
			<li>网上购物</li>
			<li>热门游戏</li>
			<li>常用软件</li>
			<li>彩票资讯</li>
			<li>在线听歌</li>
		</ul>
	</div>
	<div>
		<div id="test1_1" class="tablist block">
			<div>
				1
			</div>
		</div>
		<div id="test1_2" class="tablist"><div></div></div>
		<div id="test1_3" class="tablist"><div></div></div>
		<div id="test1_4" class="tablist"><div></div></div>
		<div id="test1_5" class="tablist"><div></div></div>
		<div id="test1_6" class="tablist"><div></div></div>
		<div id="test1_7" class="tablist"><div></div></div>
		<div id="test1_8" class="tablist"><div></div></div>
	</div>
	<script type="text/javascript">
		window.onload = function(){
			new tab('test1_li_now_', '_', function(){
				var loaded = this.getAttribute('loaded'),
					target = document.getElementById(this['link']['id']+'_'+this['Index']);

if(loaded == null && this['Index'] != 1 && target != null){//如果当前标签的内容没有载入并且当前内容不是第一个Tab(即默认显示的,如果有把默认显示的改为其他Tab,则这里的1要改成相对应的)
					this.setAttribute('loaded', true);//设置为数据已经载入,这样下次再点当前标签的时候就不会去重新取数据了

target.innerHTML = 'loading...';//显示一个载入中的内容
					/*
					getData('xxx.xxx?id=' + this['link']['id'] + '&index=' + this['Index'], function(data){//发出ajax请求,从服务器上取得当前标签要显示的内容(将当前标签所在容器的id和索引值传递给后台程序)
						target.innerHTML = data;//将取到的内容赋值给这个Tab
					});
					*/
					setTimeout(function(){//这里为模拟效果而写的演示代码,真正自己用的时候用上面注释中的,从服务器上取要显示的内容,赋值给target
						target.innerHTML = '模拟取得的数据为:' + Math.random();
						target = null;
					}, Math.random()*300 + 300);
				}
			});
		}
	</script>
</body>
</html>

提示：您可以先修改部分代码再运行

偶系小秦！

使用道具举报

iamnat　楼主

初级会员 

帖子: 43
体力: 109
威望: 0
居住地: 吉林省长春市

发表于 2011-7-21 13:32:17 |显示全部楼层

原帖由 faeng220 于 2011-7-21 11:55 发表
[html]

网页层切换效果_TAB效果大全

*{margin:0;padding:0;}
body{margin:50px;font-size:14px;color:#333;}
li{list-style:none;}
.tab1{width:760px;height:24px;}
.tab1 ul{margin:0;padding:0 ...