<!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>
<title>无标题页</title>
<link href="http://www.17mm.net/StyleSheet.css" rel="stylesheet" type="text/css" />
<script language="javascript" type="text/javascript" src="http://www.17mm.net/TagPage.js"></script>
<script language="javascript" type="text/javascript">
function crea(){
var obj = new CTagPages("maintag");
obj.add(new CTPage("files","文件1","content6"));//创建一个文档中不存在的内容页
obj.add(new CTPage("edits","编辑","content2"));
obj.add(new CTPage("windows","窗口","content3"));
obj.add(new CTPage("helps","帮助","content4"));
document.all.tag.innerHTML = obj;
obj.setTag(1);
}
window.onload = crea;
</script>
</head>
<body>
<hr />
<div id="tag"></div>
<!-- <div id="content1" class="content" style="background-color:Green;">我爱你中国</div>-->
<div id="content2" class="content" style="background-color:Aqua;">爱你中国</div>
<div id="content3" class="content" style="background-color:Fuchsia">中国爱你</div>
<div id="content4" class="content" style="background-color:Blue">很爱你中国</div>
<div id="tag1"></div>
</body>
</html>
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
CTagPages
属性
Tagpages 标签数组
方法
[n] 检索标签
Add 增加标签页
Delete 删除标签页
Update 更新标签页
Insert 插入标签页
Clear 清空标签页
SetTag 设置一个标签被选中，参数可以是TAG的ID也可以是序号
GetTag 得到被选中的TAG对象
CTPage
属性
tagId 标签ID
tagCaption 标签上显示的文字
tagContId 标签内容ID
// 使用方法
// 1.var tagpages = new CTagPages("maintag");建立一个TagPages对象,参数为这个标签页集合的ID,区分其它标签页
// 2.var tagpage = new CTPage("files","文件","content6");建立一个标签页,参数1指这个标签页的ID,参数2标签文字,
// 参数3与此标签相对的DIV,如果指定一个文档中不存在的DIV则系统会自动创建一个DIV;
// 3.tagpages.add(tagpage);使用ADD方法增加把标签增加到标签页中.
// 4.document.all.tag.innerHTML = tagpages;把标签页增加到文档中.
// 5.tagpages.setTag(1)或tagpages.setTag("files");设置默认选中的标签页,参数可以使用[数字]和[ID名称]两种方式
//
//公共变量
var currentTag = null;
var currentDiv = null;
//////////////////////////////////////////////////////////////////
////////////////////////////////
//单个标签对象
function CTPage(tagId, tagCaption, tagDiv){
this.checkDiv(tagDiv);
this.id = tagId;
this.caption = tagCaption;
this.divid = tagDiv;
this.selected = false;
}
function tagToString(){
var str = "<li class=\"";
str += this.selected?"focus":"blur";
str += "\" id=\"" + this.id +"\"" +
" divid=\"" + this.divid +"\"" +
" onclick=\"secBoard(this)\"" +
" >"+ this.caption + "</li>";
return str;
}
function CheckDiv(divname){
var tdiv = document.getElementById(divname);
if(!tdiv){
tdiv = document.createElement("DIV");
tdiv.id = divname;
tdiv.className = "content";
tdiv.innerHTML = "新的";
document.body.appendChild(tdiv);
}
tdiv.style.display = "none";
}
CTPage.prototype.checkDiv = CheckDiv;
CTPage.prototype.toString = tagToString;
////////////////////////////////////////////////////////////////
//////////////////////////////
//标签集合对象
function CTagPages(id){
this.id = id;
this.tagpages = new Array();
}
function Add(objtg){
this.tagpages[this.tagpages.length] = objtg;
}
function pageToString(){
var str="<ul id=\""+this.id+"\" class=\"tagpage\">";
for(var i=0; i<this.tagpages.length; i++){
str += this.tagpages[i];
}
str +="</ul>";
return str;
}
function Index(n){
if(n>this.tagpages.length-1 || n<0){
return;
}else{
return this.tagpages[n];
}
}
function SetTag(n){
var curtag = null;
if(typeof(n)=="string"){
curtag = document.getElementById(n);
}else{
var curtag = document.getElementById(this.id).childNodes[n];
}
if(curtag){
if(currentTag && currentDiv){
currentTag.className = "blur";
currentDiv.style.display = "none";
}
curtag.className = "focus";
currentTag = curtag;
var curDiv = document.getElementById(curtag.divid);
curDiv.style.display = "block";
currentDiv = curDiv;
}
}
CTagPages.prototype.setTag = SetTag;
CTagPages.prototype.index = Index;
CTagPages.prototype.add = Add;
CTagPages.prototype.toString = pageToString;
////////////////////////////////////////////////////////////////
/////////////////////////////////
//通用函数
function secBoard(obj)
{
//var obj = event.srcElement;
currentTag.className = "blur";
currentTag = obj;
currentTag.className = "focus";
currentDiv.style.display = "none";
currentDiv = document.getElementById(obj.divid);
currentDiv.style.display = "block";
}
