有没有可以实现标签页功能的方法啊！

<div><iframe></iframe></div>切换的时候改iframe的src就可以了。

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

这就是要我事先生成N个标签对应的N个页面内容
还要生成各自src，然后改链接是吧。小弟的要求比较过分：
能不能把内容都一个个<table>地存储好，一次下载到客户端
然后通过JavaScript “层”的技术来实现切换显示和隐藏呢？不然小弟的开发代价实在是很高啊！
这就是要我事先生成N个标签对应的N个页面内容
还要生成各自src，然后改链接是吧。小弟的要求比较过分：
能不能把内容都一个个<table>地存储好，一次下载到客户端
然后通过JavaScript “层”的技术来实现切换显示和隐藏呢？不然小弟的开发代价实在是很高啊！
把每页的内容放到数组理，然后用<div>作为页的body，随便用什么作为标签，点几标签就把相应的序号传给函数，让函数把对应序号的内容丛书组提出来放到div的innerHTML中去，肯定可行
参考
<script>
lastobj="";
function current(obj)
{
lastobj.style.display="none";
obj.style.display="block";
lastobj=obj;
}
</script>
<body onload="lastobj=document.all.baseinfo">
<a href="javascript:current(document.all.baseinfo)">基本信息</a> <a href="javascript:current(document.all.workflow)">工作流</a> <a href="javascript:current(document.all.bbs)">论坛</a>
<div id=baseinfo>
<p>baseinfo</p>
</div>
<div id=workflow style="display:none">
<p>workflow</p>
</div>
<div id=bbs style="display:none">
<p>bbs</p>
</div>
参考
<script>
lastobj="";
function current(obj)
{
lastobj.style.display="none";
obj.style.display="block";
lastobj=obj;
}
</script>
<body onload="lastobj=document.all.baseinfo">
<a href="javascript:current(document.all.baseinfo)">基本信息</a> <a href="javascript:current(document.all.workflow)">工作流</a> <a href="javascript:current(document.all.bbs)">论坛</a>
<div id=baseinfo>
<p>baseinfo</p>
</div>
<div id=workflow style="display:none">
<p>workflow</p>
</div>
<div id=bbs style="display:none">
<p>bbs</p>
</div>
参考
<script>
lastobj="";
function current(obj)
{
lastobj.style.display="none";
obj.style.display="block";
lastobj=obj;
}
</script>
<body onload="lastobj=document.all.baseinfo">
<a href="javascript:current(document.all.baseinfo)">基本信息</a> <a href="javascript:current(document.all.workflow)">工作流</a> <a href="javascript:current(document.all.bbs)">论坛</a>
<div id=baseinfo>
<p>baseinfo</p>
</div>
<div id=workflow style="display:none">
<p>workflow</p>
</div>
<div id=bbs style="display:none">
<p>bbs</p>
</div>
<HTML><HEAD>
<style>
.activeTab
{
    BORDER-RIGHT: medium none;
    PADDING-RIGHT: 5px;
    BORDER-TOP: #777777 1px solid;
    PADDING-LEFT: 5px;
    PADDING-BOTTOM: 0px;
    BORDER-LEFT: #777777 1px solid;
    PADDING-TOP: 3px;
    BORDER-BOTTOM: #f0f0f0 1px solid;
    BACKGROUND-COLOR: #f0f0f0
}
.normalTab
{
    BORDER-RIGHT: medium none;
    PADDING-RIGHT: 5px;
    BORDER-TOP: #777777 1px solid;
    PADDING-LEFT: 5px;
    PADDING-BOTTOM: 0px;
    BORDER-LEFT: #777777 1px solid;
    PADDING-TOP: 3px;
    BORDER-BOTTOM: #777777 1px solid;
    BACKGROUND-COLOR: #d8c8a8
}
</style><SCRIPT>
function TabControl(name,active)
{
this.name = name;
this.tabName = new Array();
this.tabDiv = new Array();
this.contentDiv = new Array();
this.activeTab = active;
return this;
}function AddTabItem(tbCtrl,name,tabDiv,contentDiv)
{
tbCtrl.tabName[tbCtrl.tabName.length] = name;
tbCtrl.tabDiv[tbCtrl.tabDiv.length] = tabDiv;
tbCtrl.contentDiv[tbCtrl.contentDiv.length] = contentDiv;
}function SetActiveTab(tbCtrl,name)
{
var i;
for (i=0;i<tbCtrl.tabName.length;i++){
if (tbCtrl.tabName[i]==name)
break;
}
if (i>=tbCtrl.tabName.length)
return false;
document.all[tbCtrl.tabDiv[tbCtrl.activeTab]].className = "normalTab";
document.all[tbCtrl.contentDiv[tbCtrl.activeTab]].style.display = "none";
document.all[tbCtrl.tabDiv[i]].className = "activeTab";
document.all[tbCtrl.contentDiv[i]].style.display = "block";
tbCtrl.activeTab = i;
if (window.top.StatFrame != null)
window.top.StatFrame.RegisterVar(tbCtrl.name,name);
return false;
}function SetActiveVTab(tbCtrl,name)
{
var i;
for (i=0;i<tbCtrl.tabName.length;i++){
if (tbCtrl.tabName[i]==name)
break;
}
if (i>=tbCtrl.tabName.length)
return false;
document.all[tbCtrl.tabDiv[tbCtrl.activeTab]].className = "normalVTab";
document.all[tbCtrl.contentDiv[tbCtrl.activeTab]].style.display = "none";
document.all[tbCtrl.tabDiv[i]].className = "activeVTab";
document.all[tbCtrl.contentDiv[i]].style.display = "block";
tbCtrl.activeTab = i;
if (window.top.StatFrame != null)
window.top.StatFrame.RegisterVar(tbCtrl.name,name);
return false;
}
</SCRIPT>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</HEAD><BODY>
<TABLE WIDTH="100%" BORDER=0 CELLSPACING=0 CELLPADDING=0 BGCOLOR="#887858">
<TR><TD NOWRAP>
<DIV CLASS="titleBar"> 员工信息:</DIV>
</TD></TR>
</TABLE>
<CENTER>
<BR>
<TABLE WIDTH="95%" CELLSPACING=0 CELLPADDING=0 HEIGHT="90%">
<TR HEIGHT="1%">
<TD NOWRAP WIDTH="1%">
<DIV ID="tabDivempView_0" CLASS="activeTab">
<A CLASS="ttTable" HREF="#" ONCLICK="blur();SetActiveTab(empView,'empView_0');return false;">
任务列表</A>
</DIV>
</TD>
<TD NOWRAP WIDTH="1%">
<DIV ID="tabDivempView_1" CLASS="normalTab" >
<A CLASS="ttTable" HREF="#" ONCLICK="blur();SetActiveTab(empView,'empView_1');return false;">
工作进程列表</A>
</DIV>
</TD>
<TD NOWRAP WIDTH="1%">
<DIV ID="tabDivempView_2" CLASS="normalTab">
<A CLASS="ttTable" HREF="#" ONCLICK="blur();SetActiveTab(empView,'empView_2');return false;">
报价单列表</A>
</DIV>
</TD>
<TD ALIGN=RIGHT WIDTH="96%">
<DIV CLASS="lastTab">
<A CLASS="ttTable" HREF="#" onclick="backPage();return false;">退出</A>
</DIV>
</TD>
</TR>
<TR VALIGN=TOP>
<TD COLSPAN=6 CLASS="tabContent">
<DIV ID="cntDivempView_0" CLASS="contentDiv" STYLE="display:block">
<TABLE BORDER="0" CELLSPACING="0" CELLPADDING="0" WIDTH="100%">
<COLGROUP SPAN=10 CLASS="td" STYLE="line-height:16px;padding:5px;padding-top:2px;padding-bottom:0px;">
<TR>
<TD NOWRAP CLASS="tt2Line">任务主题</TD>
<TD NOWRAP CLASS="tt2Line">任务对象</TD>
<TD NOWRAP CLASS="tt2Line">任务状态</TD>
<TD NOWRAP CLASS="tt2Line">完成期限</TD>
</TR>
</TABLE>
</DIV> <DIV ID="cntDivempView_1" CLASS="contentDiv" STYLE="display:none; HEIGHT: 430px; OVERFLOW: auto">
<TABLE BORDER="0" CELLSPACING="0" CELLPADDING="0" WIDTH="100%">
<COLGROUP SPAN=13 CLASS="td" STYLE="line-height:16px;padding:5px;padding-top:2px;padding-bottom:0px;">
<TR>
<TD NOWRAP CLASS="tt2Line">开始日期</TD>
<TD NOWRAP CLASS="tt2Line">任务主题</TD>
<TD NOWRAP CLASS="tt2Line">动作</TD>
<TD NOWRAP CLASS="tt2Line">任务对象</TD>
<TD ALIGN="CENTER" NOWRAP CLASS="tt2Line">执行员工</TD>
<TD ALIGN="RIGHT" NOWRAP CLASS="tt2Line">发生费用</TD>
</TR>
</TABLE>
</DIV> <DIV ID="cntDivempView_2" CLASS="contentDiv" STYLE="display:none">
<TABLE BORDER="0" CELLSPACING="0" CELLPADDING="0" WIDTH="100%"><COLGROUP SPAN=7 CLASS="td" STYLE="line-height:16px;padding:5px;padding-top:2px;padding-bottom:0px;">
<TR>
<TD NOWRAP CLASS="tt2Line">报价时间</TD>
<TD NOWRAP CLASS="tt2Line">报价单号</TD>
<TD NOWRAP CLASS="tt2Line">报价对象</TD>
</TR>
</TABLE>
</DIV> </TD></TR></TABLE>
<SCRIPT LANGUAGE="javascript">
empView = new TabControl('empView',0);
AddTabItem(empView,'empView_0','tabDivempView_0','cntDivempView_0');
AddTabItem(empView,'empView_1','tabDivempView_1','cntDivempView_1');
AddTabItem(empView,'empView_2','tabDivempView_2','cntDivempView_2');
</SCRIPT>
</CENTER></BODY></HTML>
刚才些了20分钟呢，多少给点分意思意思，样式自己扩展！大概就是思路了！给点分意思意思
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<style>
.yellowSmallCLF { font-size: 11px; color: #000000;}
.yellowSmallCLF   a:link     { color: #000000; text-decoration: none;}
.yellowSmallCLF a:visited { color: #000000; text-decoration: none;}
.yellowSmallCLF a:active { color: #000000; text-decoration: none;}
.yellowSmallCLF a:hover     { color: #FF9900; text-decoration: underline;}
</style>
<body bgcolor="#FFFFFF" text="#000000">
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>
<div id="pager" style="position:absolute;left:50px;top:50px;width:500px;background-color:#000000;height:400px;over-flow:hidden;">
<div id="pageCtrl" style="position:absolute;left:1px;top:1px;width:498px;background-color:#e7e7e7;height:20px;"></div>
<div id="pageBody" style="position:absolute;left:1px;top:22px;width:498px;background-color:#e7e7e7;height:377px"></div>
</div>
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>
<input type=button value="add new page" onclick="mypager.addPage('new page');mypager.makePage();">
</body>
</html>
首先用addPage('...')天加一页内容，放到数组，让后别忘了makePage()生成pagecontrol，你可以随时天加新页，根据需要吧,小心mypager,是个新对象，所有方法是属于它的，别忘了加上，算了还是用这两个函数，加了个name属性，这样就可以随意其名字了只是PAGER=new pager('PAPER')注意变化了，
function pager(name){
    this.name=name;
   this.pages=new Array();
   this.pageControl=document.all['pageCtrl'];
   this.pageBody=document.all['pageBody'];   this.addPage=addPage;
   this.pageTo=pageTo;
   this.makePage=makePage;
}function makePage(){
    var str='';
for(i=0;i<this.pages.length;i++){
    str+='<span class="yellowSmallCLF" >[<a href="#" onclick=\"'+this.name+'.pageTo('+i+')\">'+(i+1)+'</a>]</span>';
}
this.pageControl.innerHTML=str;
}
行了这样更容易扩展了
可以参考：http://dev-club.ccw.com.cn/club/default.asp 中间的栏目显示部分的实现方法。
不相信，就比拼一下，你说话真没礼貌，去user1.7host.com/ccrock就知道时不是我写的，拿你没办法，你确实伤了我的心
简短例子
<script>
lastobj="";
function current(obj)
{
lastobj.style.display="none";
obj.style.display="block";
lastobj=obj;
}
</script>
<body onload="lastobj=document.all.baseinfo">
<a href="javascript:current(document.all.baseinfo)">基本信息</a> <a href="javascript:current(document.all.workflow)">工作流</a> <a href="javascript:current(document.all.bbs)">论坛</a>
<div id=baseinfo>
<p>baseinfo</p>
</div>
<div id=workflow style="display:none">
<p>workflow</p>
</div>
<div id=bbs style="display:none">
<p>bbs</p>
</div>

有没有可以实现 标签页 功能的方法啊！

解决方案 »

有没有可以实现标签页功能的方法啊！