日期:2014-05-16  浏览次数:20584 次

请教关于页面加载问题,谢谢!
<script type="text/javascript">
function selectTag(Content,selfObj){
// 操作标签
var tag = document.getElementById("tags").getElementsByTagName("li");
var taglength = tag.length;
for(i=0; i<taglength; i++){
tag[i].className = "";
}
selfObj.parentNode.className = "selectTag";
// 操作内容
for(i=0; j=document.getElementById("tagc"+i); i++){
j.style.display = "none";
}
document.getElementById(Content).style.display = "block";


}
</script>

<DIV id=ccc>
<Ul id=tags>
  <LI><A onClick="selectTag('tagc0',this)">选项卡1</A> </LI>
  <LI><A onClick="selectTag('tagc1',this)">选项卡2</A> </LI>
  <LI><A onClick="selectTag('tagc2',this)">选项卡3</A> </LI>
</UL>
<DIV id=tagc>
<!--广告标签的内容,默认显示-->
<DIV class="tagc selectTag" id=tagc3><SCRIPT src="ad_001.js"></SCRIPT></DIV>

<!--第一个标签的内容-->
<DIV class="tagc" id=tagc0>
<iframe name="show" scrolling="no" topmargin="0" src="a.asp" marginwidth="0" marginheight="0" frameborder="0" scrolling="no" width="100" height="200" allowTransparency="true"></iframe>
</DIV>

<!--第二个标签的内容-->
<DIV class="tagc" id=tagc1>
<DIV class="Style">
<ul class="list" id="list">页面内容3</ul>
</DIV>
</DIV>

<!--第三个标签的内容-->
<DIV class="tagc" id=tagc2>
<DIV class="Style">
<ul class="list" id="list">页面内容2</ul>
</DIV>
</DIV>
<!--标签集结束-->
</DIV>
</DIV>


Tab默认显示一个广告js,我想页面读取的时候暂时不加载选项卡1、2、3里面的内容

当点击选项卡1或2的时候再加载相应div里的内容,有一个 数据加载中...

请问如何做到,不甚感激!

------解决方案--------------------
那就是点击切换的时候 ajax问服务器取内容了,一言两语看不清的,自己查资料吧
http://www.w3school.com.cn/ajax/index.asp
------解决方案--------------------
首先你要学会AJAX,至于AJAX怎么用一句两句真讲不清
但是给你一个思路,首先服务端从数据库取数据时只取第一个选项卡里的数据然后显示在第一个选项卡DIV里
给其他的选项卡一个标识,点击的时候触发JS事件,通过AJAX从后台获取相应数据,可以是html,json,xml等
然后把获取的内容填充在选项卡对应的DIV里就可以了,思路其实很简单,是最基本的AJAX应用!
另外提醒你一下,代码非常不规范,html代码要全部小写,属性值要加双引号,要有清晰的缩进!