选项卡

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

div#tags div.titles ul {list-style-type: none; margin: 0; padding: 0;}

div#tags div.titles ul li {

float: left;

border-left: 1px solid #3CF;

border-top: 1px solid #3CF;

border-right: 1px solid #3CF;

padding: 5px;

color: #CCC;

font-size: 12px;

margin-top: 10px;

margin-right: 2px;

}

div#tags div.titles ul li.selected {

float: left;

border-left: 1px solid #3C9;

border-top: 1px solid #3C9;

border-right: 1px solid #3C9;

padding: 10px;

color: #666;

font-size: 12px;

font-weight: bold;

margin-top: 0px;

}

div#tags div.content {

clear: both;

border: 1px solid #3C9;

width: 550px;

height: 400px;

}

</style>

</head>

<body>

<div>

</div>

</body>

</html>

var theTag = new Tag("tags");

theTag.BuildTag();

</script>

js代码

Tag Class

Create by: Feng Hui

Create date: 2006-7-5

function Tag(id) {

var theObj = this;

this.tagID = id;

this.tagObj = null;

this.tagTitles = [];

this.tagContents = [];

this.tagSelectedIndex = 0;

this.prevTagObj = null;

this.prevContentObj = null;

this.InitTag = function() {

if (this.tagID == undefined) return false;

var j = 0;

this.tagObj = document.getElementById(this.tagID);

if (this.tagObj.childNodes[0].nodeType == 1) {

var contentObj = this.tagObj.childNodes[1];

} else {

var contentObj = this.tagObj.childNodes[3];

}

var contents = contentObj.childNodes;

for (var i = 0; i < contents.length; i++) {

if (contents[i].nodeType == 1) {

this.tagTitles[j] = contents[i].title;

this.tagContents[j] = contents[i];

j++;

}

this.BuildTag = function() {

if (this.InitTag()) return false;

if (this.tagObj.childNodes[0].nodeType == 1) {

var titleObj = this.tagObj.childNodes[0];

} else {

var titleObj = this.tagObj.childNodes[1];

}

var ulObj = document.createElement("ul");

titleObj.appendChild(ulObj);

var liObj = null;

for (var i = 0; i < this.tagTitles.length; i++) {

liObj = document.createElement("li");

ulObj.appendChild(liObj);

liObj.innerHTML = this.tagTitles[i];

if (this.tagSelectedIndex == i) {

liObj.className = "selected";

this.tagContents[i].style.display = "block";

this.prevTagObj = liObj;

this.prevContentObj = this.tagContents[i];

} else {

this.tagContents[i].style.display = "none";

}

liObj.onclick = function() {

var index = theObj.getSelectIndex(this);

theObj.prevTagObj.className = "";

theObj.prevTagObj = this;

this.className = "selected";

theObj.prevContentObj.style.display = "none";

theObj.prevContentObj = theObj.tagContents[index];

theObj.tagContents[index].style.display = "block";

}

this.getSelectIndex = function(liObj) {

var title = liObj.innerHTML;

for (var i = 0; i < this.tagTitles.length; i++) {

if (this.tagTitles[i] == title) {

return i;

}

posted on 2007-02-12 17:40 mbskys 阅读(309) 评论(0) 收藏举报